From 04e57c0dd1f172c4b9220891b3d1ee31c150bc07 Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Fri, 12 Jun 2026 00:09:20 +0700
Subject: [PATCH] Add purchase management features including Purchase and
 PurchaseItem models, PurchaseController for CRUD operations, and
 corresponding request validation. Implement UI components for creating,
 editing, and listing purchases, along with permissions in the Permission and
 Role enums. Enhance sidebar navigation for purchases and integrate media
 handling for purchase items.

---
 app/Enums/Permission.php                      |  12 +
 app/Enums/Role.php                            |   8 +
 .../Admin/Manage/PurchaseController.php       |  76 ++++
 .../Requests/Admin/Manage/PurchaseRequest.php |  42 ++
 app/Models/Purchase.php                       |  88 ++++
 app/Models/PurchaseItem.php                   |  81 ++++
 app/Models/Supplier.php                       |   6 +
 app/Models/User.php                           |   5 +
 app/Services/Manage/PurchaseService.php       | 295 ++++++++++++
 ...26_06_11_120001_create_purchases_table.php |  32 ++
 ..._11_120002_create_purchase_items_table.php |  31 ++
 package-lock.json                             |   8 +-
 package.json                                  |   2 +-
 resources/css/app.css                         |   2 +
 resources/js/components/AppSidebar.vue        |  19 +-
 .../manage/purchases/PurchaseGroupedTable.vue | 168 +++++++
 .../manage/purchases/PurchasePosForm.vue      | 424 ++++++++++++++++++
 .../manage/purchases/data-table-actions.vue   |  80 ++++
 .../components/media/MediaThumbnailCell.vue   |   1 -
 .../pages/admin/manage/purchases/Create.vue   |  42 ++
 .../js/pages/admin/manage/purchases/Edit.vue  |  61 +++
 .../js/pages/admin/manage/purchases/Index.vue |  89 ++++
 resources/js/types/purchase.ts                |  80 ++++
 routes/web.php                                |  29 ++
 24 files changed, 1674 insertions(+), 7 deletions(-)
 create mode 100644 app/Http/Controllers/Admin/Manage/PurchaseController.php
 create mode 100644 app/Http/Requests/Admin/Manage/PurchaseRequest.php
 create mode 100644 app/Models/Purchase.php
 create mode 100644 app/Models/PurchaseItem.php
 create mode 100644 app/Services/Manage/PurchaseService.php
 create mode 100644 database/migrations/2026_06_11_120001_create_purchases_table.php
 create mode 100644 database/migrations/2026_06_11_120002_create_purchase_items_table.php
 create mode 100644 resources/js/components/admin/manage/purchases/PurchaseGroupedTable.vue
 create mode 100644 resources/js/components/admin/manage/purchases/PurchasePosForm.vue
 create mode 100644 resources/js/components/admin/manage/purchases/data-table-actions.vue
 create mode 100644 resources/js/pages/admin/manage/purchases/Create.vue
 create mode 100644 resources/js/pages/admin/manage/purchases/Edit.vue
 create mode 100644 resources/js/pages/admin/manage/purchases/Index.vue
 create mode 100644 resources/js/types/purchase.ts

diff --git a/app/Enums/Permission.php b/app/Enums/Permission.php
index 5945602..eb03a87 100644
--- a/app/Enums/Permission.php
+++ b/app/Enums/Permission.php
@@ -55,6 +55,11 @@ enum Permission: string
     case RAW_MATERIALS_DELETE = 'raw-materials.delete';
     case RAW_MATERIALS_TOGGLE_STATUS = 'raw-materials.toggle-status';
 
+    case PURCHASES_VIEW = 'purchases.view';
+    case PURCHASES_CREATE = 'purchases.create';
+    case PURCHASES_UPDATE = 'purchases.update';
+    case PURCHASES_DELETE = 'purchases.delete';
+
     case CASH_VIEW = 'cash.view';
     case CASH_DEPOSIT = 'cash.deposit';
     case CASH_UPDATE = 'cash.update';
@@ -130,6 +135,11 @@ public function label(): string
             self::RAW_MATERIALS_DELETE => 'Hapus Bahan Baku',
             self::RAW_MATERIALS_TOGGLE_STATUS => 'Ubah Status Bahan Baku',
 
+            self::PURCHASES_VIEW => 'Lihat Belanja',
+            self::PURCHASES_CREATE => 'Catat Belanja',
+            self::PURCHASES_UPDATE => 'Ubah Belanja',
+            self::PURCHASES_DELETE => 'Hapus Belanja',
+
             self::CASH_VIEW => 'Lihat Kas',
             self::CASH_DEPOSIT => 'Setor Kas',
             self::CASH_UPDATE => 'Ubah Setor Kas',
@@ -177,6 +187,8 @@ public function group(): string
             self::PRODUCTS_DELETE, self::PRODUCTS_TOGGLE_STATUS => 'Produk',
             self::RAW_MATERIALS_VIEW, self::RAW_MATERIALS_CREATE, self::RAW_MATERIALS_UPDATE,
             self::RAW_MATERIALS_DELETE, self::RAW_MATERIALS_TOGGLE_STATUS => 'Bahan Baku',
+            self::PURCHASES_VIEW, self::PURCHASES_CREATE, self::PURCHASES_UPDATE,
+            self::PURCHASES_DELETE => 'Belanja',
             self::CASH_VIEW, self::CASH_DEPOSIT, self::CASH_UPDATE, self::CASH_DELETE => 'Kas',
             self::EXPENSES_VIEW, self::EXPENSES_CREATE, self::EXPENSES_UPDATE,
             self::EXPENSES_DELETE => 'Pengeluaran',
diff --git a/app/Enums/Role.php b/app/Enums/Role.php
index 246bcbe..ee02d19 100644
--- a/app/Enums/Role.php
+++ b/app/Enums/Role.php
@@ -74,6 +74,10 @@ public function permissions(): array
                 Permission::RAW_MATERIALS_UPDATE,
                 Permission::RAW_MATERIALS_DELETE,
                 Permission::RAW_MATERIALS_TOGGLE_STATUS,
+                Permission::PURCHASES_VIEW,
+                Permission::PURCHASES_CREATE,
+                Permission::PURCHASES_UPDATE,
+                Permission::PURCHASES_DELETE,
                 Permission::CASH_VIEW,
                 Permission::CASH_DEPOSIT,
                 Permission::CASH_UPDATE,
@@ -166,6 +170,10 @@ public function permissions(): array
                 Permission::RAW_MATERIALS_UPDATE,
                 Permission::RAW_MATERIALS_DELETE,
                 Permission::RAW_MATERIALS_TOGGLE_STATUS,
+                Permission::PURCHASES_VIEW,
+                Permission::PURCHASES_CREATE,
+                Permission::PURCHASES_UPDATE,
+                Permission::PURCHASES_DELETE,
             ],
             self::MARKETING => [
                 Permission::DASHBOARD_VIEW,
diff --git a/app/Http/Controllers/Admin/Manage/PurchaseController.php b/app/Http/Controllers/Admin/Manage/PurchaseController.php
new file mode 100644
index 0000000..9e790d6
--- /dev/null
+++ b/app/Http/Controllers/Admin/Manage/PurchaseController.php
@@ -0,0 +1,76 @@
+<?php
+
+namespace App\Http\Controllers\Admin\Manage;
+
+use App\Http\Controllers\Concerns\ParsesDataTableQuery;
+use App\Http\Controllers\Controller;
+use App\Http\Requests\Admin\Manage\PurchaseRequest;
+use App\Models\Purchase;
+use App\Services\Manage\PurchaseService;
+use Illuminate\Http\RedirectResponse;
+use Illuminate\Http\Request;
+use Inertia\Inertia;
+use Inertia\Response;
+
+class PurchaseController extends Controller
+{
+    use ParsesDataTableQuery;
+
+    public function __construct(
+        private readonly PurchaseService $purchaseService,
+    ) {}
+
+    public function index(Request $request): Response
+    {
+        $tableQuery = $this->parseDataTableQuery($request);
+
+        return Inertia::render('admin/manage/purchases/Index', [
+            'purchases' => $this->purchaseService->paginateForIndex($tableQuery),
+            'filters' => $this->dataTableFilters($tableQuery),
+        ]);
+    }
+
+    public function create(): Response
+    {
+        return Inertia::render('admin/manage/purchases/Create', [
+            'suppliers' => $this->purchaseService->supplierOptions(),
+            'catalog' => $this->purchaseService->catalogItems(),
+        ]);
+    }
+
+    public function store(PurchaseRequest $request): RedirectResponse
+    {
+        $this->purchaseService->create($request->validated(), $request->user());
+
+        Inertia::flash('success', 'Belanja berhasil ditambahkan.');
+
+        return redirect()->route('admin.manage.purchases.index');
+    }
+
+    public function edit(Purchase $purchase): Response
+    {
+        return Inertia::render('admin/manage/purchases/Edit', [
+            'purchase' => $this->purchaseService->findForEdit($purchase),
+            'suppliers' => $this->purchaseService->supplierOptions(),
+            'catalog' => $this->purchaseService->catalogItems($purchase),
+        ]);
+    }
+
+    public function update(PurchaseRequest $request, Purchase $purchase): RedirectResponse
+    {
+        $this->purchaseService->update($purchase, $request->validated());
+
+        Inertia::flash('success', 'Belanja berhasil diperbarui.');
+
+        return redirect()->route('admin.manage.purchases.index');
+    }
+
+    public function destroy(Purchase $purchase): RedirectResponse
+    {
+        $this->purchaseService->delete($purchase);
+
+        Inertia::flash('success', 'Belanja berhasil dihapus.');
+
+        return redirect()->route('admin.manage.purchases.index');
+    }
+}
diff --git a/app/Http/Requests/Admin/Manage/PurchaseRequest.php b/app/Http/Requests/Admin/Manage/PurchaseRequest.php
new file mode 100644
index 0000000..429d720
--- /dev/null
+++ b/app/Http/Requests/Admin/Manage/PurchaseRequest.php
@@ -0,0 +1,42 @@
+<?php
+
+namespace App\Http\Requests\Admin\Manage;
+
+use App\Enums\Permission;
+use App\Http\Requests\Concerns\ValidatesMediaUploads;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Validation\Rule;
+
+class PurchaseRequest extends FormRequest
+{
+    use ValidatesMediaUploads;
+
+    public function authorize(): bool
+    {
+        $permission = $this->isMethod('POST')
+            ? Permission::PURCHASES_CREATE
+            : Permission::PURCHASES_UPDATE;
+
+        return $this->user()?->can($permission->value) ?? false;
+    }
+
+    /**
+     * @return array<string, mixed>
+     */
+    public function rules(): array
+    {
+        return [
+            'supplier_id' => ['required', 'integer', Rule::exists('suppliers', 'id')->whereNull('deleted_at')],
+            'discount' => ['nullable', 'integer', 'min:0'],
+            'notes' => ['nullable', 'string', 'max:100'],
+            'items' => ['required', 'array', 'min:1'],
+            'items.*.raw_material_price_id' => [
+                'required',
+                'integer',
+                Rule::exists('raw_material_prices', 'id')->whereNull('deleted_at'),
+            ],
+            'items.*.quantity' => ['required', 'numeric', 'gt:0'],
+            ...$this->photoRules(),
+        ];
+    }
+}
diff --git a/app/Models/Purchase.php b/app/Models/Purchase.php
new file mode 100644
index 0000000..c046202
--- /dev/null
+++ b/app/Models/Purchase.php
@@ -0,0 +1,88 @@
+<?php
+
+namespace App\Models;
+
+use App\Models\Concerns\HasModuleMedia;
+use Illuminate\Database\Eloquent\Attributes\Appends;
+use Illuminate\Database\Eloquent\Attributes\Guarded;
+use Illuminate\Database\Eloquent\Casts\Attribute;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
+use Illuminate\Database\Eloquent\Relations\HasMany;
+use Illuminate\Database\Eloquent\SoftDeletes;
+use Spatie\MediaLibrary\HasMedia;
+
+#[Guarded(['id'])]
+#[Appends([
+    'subtotal_formatted',
+    'discount_formatted',
+    'total_formatted',
+    'created_at_formatted',
+])]
+class Purchase extends Model implements HasMedia
+{
+    use HasModuleMedia;
+    use SoftDeletes;
+
+    public static function mediaModuleName(): string
+    {
+        return 'purchase';
+    }
+
+    public function registerMediaCollections(): void
+    {
+        $this->addMediaCollection('photos');
+    }
+
+    protected function casts(): array
+    {
+        return [
+            'subtotal' => 'integer',
+            'discount' => 'integer',
+            'total' => 'integer',
+        ];
+    }
+
+    public function subtotalFormatted(): Attribute
+    {
+        return Attribute::make(
+            get: fn () => 'Rp '.number_format($this->subtotal, 0, ',', '.'),
+        );
+    }
+
+    public function discountFormatted(): Attribute
+    {
+        return Attribute::make(
+            get: fn () => 'Rp '.number_format($this->discount, 0, ',', '.'),
+        );
+    }
+
+    public function totalFormatted(): Attribute
+    {
+        return Attribute::make(
+            get: fn () => 'Rp '.number_format($this->total, 0, ',', '.'),
+        );
+    }
+
+    public function createdAtFormatted(): Attribute
+    {
+        return Attribute::make(
+            get: fn () => $this->created_at?->translatedFormat('l, d F Y H:i'),
+        );
+    }
+
+    public function supplier(): BelongsTo
+    {
+        return $this->belongsTo(Supplier::class);
+    }
+
+    public function createdBy(): BelongsTo
+    {
+        return $this->belongsTo(User::class, 'created_by_id');
+    }
+
+    public function items(): HasMany
+    {
+        return $this->hasMany(PurchaseItem::class);
+    }
+}
diff --git a/app/Models/PurchaseItem.php b/app/Models/PurchaseItem.php
new file mode 100644
index 0000000..a4da751
--- /dev/null
+++ b/app/Models/PurchaseItem.php
@@ -0,0 +1,81 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Attributes\Appends;
+use Illuminate\Database\Eloquent\Attributes\Guarded;
+use Illuminate\Database\Eloquent\Casts\Attribute;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
+use Illuminate\Database\Eloquent\SoftDeletes;
+
+#[Guarded(['id'])]
+#[Appends([
+    'quantity_formatted',
+    'quantity_input',
+    'unit_price_formatted',
+    'subtotal_formatted',
+    'unit_abbreviation',
+])]
+class PurchaseItem extends Model
+{
+    use SoftDeletes;
+
+    protected function casts(): array
+    {
+        return [
+            'quantity' => 'decimal:4',
+            'unit_price' => 'integer',
+            'subtotal' => 'integer',
+        ];
+    }
+
+    public function quantityFormatted(): Attribute
+    {
+        return Attribute::make(
+            get: function () {
+                $formatted = rtrim(rtrim(number_format((float) $this->quantity, 4, ',', '.'), '0'), ',');
+
+                return "{$formatted} {$this->rawMaterialPrice?->rawMaterial?->unit?->abbreviation()}";
+            },
+        );
+    }
+
+    public function quantityInput(): Attribute
+    {
+        return Attribute::make(
+            get: fn () => rtrim(rtrim(number_format((float) $this->quantity, 4, '.', ''), '0'), '.'),
+        );
+    }
+
+    public function unitPriceFormatted(): Attribute
+    {
+        return Attribute::make(
+            get: fn () => 'Rp '.number_format($this->unit_price, 0, ',', '.'),
+        );
+    }
+
+    public function subtotalFormatted(): Attribute
+    {
+        return Attribute::make(
+            get: fn () => 'Rp '.number_format($this->subtotal, 0, ',', '.'),
+        );
+    }
+
+    public function unitAbbreviation(): Attribute
+    {
+        return Attribute::make(
+            get: fn () => $this->rawMaterialPrice?->rawMaterial?->unit?->abbreviation(),
+        );
+    }
+
+    public function purchase(): BelongsTo
+    {
+        return $this->belongsTo(Purchase::class);
+    }
+
+    public function rawMaterialPrice(): BelongsTo
+    {
+        return $this->belongsTo(RawMaterialPrice::class);
+    }
+}
diff --git a/app/Models/Supplier.php b/app/Models/Supplier.php
index b313adc..37d1f92 100644
--- a/app/Models/Supplier.php
+++ b/app/Models/Supplier.php
@@ -4,10 +4,16 @@
 
 use Illuminate\Database\Eloquent\Attributes\Guarded;
 use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\HasMany;
 use Illuminate\Database\Eloquent\SoftDeletes;
 
 #[Guarded(['id'])]
 class Supplier extends Model
 {
     use SoftDeletes;
+
+    public function purchases(): HasMany
+    {
+        return $this->hasMany(Purchase::class);
+    }
 }
diff --git a/app/Models/User.php b/app/Models/User.php
index b2ebd99..78c797b 100644
--- a/app/Models/User.php
+++ b/app/Models/User.php
@@ -75,4 +75,9 @@ public function expenses(): HasMany
     {
         return $this->hasMany(Expense::class, 'created_by_id');
     }
+
+    public function purchases(): HasMany
+    {
+        return $this->hasMany(Purchase::class, 'created_by_id');
+    }
 }
diff --git a/app/Services/Manage/PurchaseService.php b/app/Services/Manage/PurchaseService.php
new file mode 100644
index 0000000..09c4e56
--- /dev/null
+++ b/app/Services/Manage/PurchaseService.php
@@ -0,0 +1,295 @@
+<?php
+
+namespace App\Services\Manage;
+
+use App\Models\Purchase;
+use App\Models\PurchaseItem;
+use App\Models\RawMaterial;
+use App\Models\RawMaterialPrice;
+use App\Models\Supplier;
+use App\Models\User;
+use App\Services\Media\MediaService;
+use App\Support\Media\MediaPresenter;
+use Illuminate\Contracts\Pagination\LengthAwarePaginator;
+use Illuminate\Database\Eloquent\Builder;
+use Illuminate\Support\Collection;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Validation\ValidationException;
+
+class PurchaseService
+{
+    private const MAX_PHOTOS_FILES = 1;
+
+    public function __construct(
+        private readonly MediaService $mediaService,
+    ) {}
+
+    /**
+     * @param  array{search: string, sort: string, direction: 'asc'|'desc'}  $tableQuery
+     */
+    public function paginateForIndex(array $tableQuery): LengthAwarePaginator
+    {
+        $query = Purchase::query()
+            ->with([
+                'supplier:id,name',
+                'createdBy.profile',
+                'items.rawMaterialPrice.rawMaterial:id,name,unit',
+                'media',
+            ])
+            ->when($tableQuery['search'] !== '', function (Builder $query) use ($tableQuery): void {
+                $search = $tableQuery['search'];
+                $query->where(function (Builder $query) use ($search): void {
+                    $query->where('notes', 'like', "%{$search}%")
+                        ->orWhereHas('supplier', fn (Builder $query) => $query->where('name', 'like', "%{$search}%"))
+                        ->orWhereHas('items.rawMaterialPrice', function (Builder $query) use ($search): void {
+                            $query->where('variant', 'like', "%{$search}%")
+                                ->orWhereHas('rawMaterial', fn (Builder $query) => $query->where('name', 'like', "%{$search}%"));
+                        });
+                });
+            });
+
+        $this->applySorting($query, $tableQuery['sort'], $tableQuery['direction']);
+
+        return $query
+            ->paginate(10)
+            ->withQueryString()
+            ->through(function (Purchase $purchase) {
+                $purchase->setAttribute(
+                    'photos',
+                    MediaPresenter::first($purchase, 'photos'),
+                );
+
+                return $purchase;
+            });
+    }
+
+    /**
+     * @return list<array{value: int, label: string}>
+     */
+    public function supplierOptions(): array
+    {
+        return Supplier::query()
+            ->orderBy('name')
+            ->get(['id', 'name'])
+            ->map(fn (Supplier $supplier) => [
+                'value' => $supplier->id,
+                'label' => $supplier->name,
+            ])
+            ->all();
+    }
+
+    /**
+     * @return Collection<int, RawMaterial>
+     */
+    public function catalogItems(?Purchase $purchase = null): Collection
+    {
+        $purchasePriceIds = $purchase
+            ? $purchase->items()->pluck('raw_material_price_id')->all()
+            : [];
+
+        return RawMaterial::query()
+            ->with([
+                'prices' => fn ($query) => $query
+                    ->orderBy('created_at')
+                    ->with(['rawMaterial:id,unit', 'media']),
+            ])
+            ->where(function (Builder $query) use ($purchasePriceIds): void {
+                $query->active();
+
+                if ($purchasePriceIds !== []) {
+                    $query->orWhereHas(
+                        'prices',
+                        fn (Builder $query) => $query->whereIn('id', $purchasePriceIds),
+                    );
+                }
+            })
+            ->orderBy('name')
+            ->get()
+            ->each(function (RawMaterial $rawMaterial): void {
+                $rawMaterial->prices->each(function (RawMaterialPrice $price): void {
+                    $price->setAttribute(
+                        'images',
+                        MediaPresenter::collection($price, 'images'),
+                    );
+                });
+            });
+    }
+
+    public function findForEdit(Purchase $purchase): Purchase
+    {
+        $purchase->load([
+            'items.rawMaterialPrice.rawMaterial:id,name,unit',
+            'media',
+        ]);
+
+        $purchase->setAttribute(
+            'photos',
+            MediaPresenter::first($purchase, 'photos'),
+        );
+
+        $purchase->items->each(function (PurchaseItem $item): void {
+            $price = $item->rawMaterialPrice;
+
+            if ($price) {
+                $price->setAttribute(
+                    'images',
+                    MediaPresenter::collection($price, 'images'),
+                );
+            }
+        });
+
+        return $purchase;
+    }
+
+    /**
+     * @param  array<string, mixed>  $validated
+     */
+    public function create(array $validated, User $user): Purchase
+    {
+        return DB::transaction(function () use ($validated, $user): Purchase {
+            $lineItems = $this->buildLineItems($validated['items']);
+            $subtotal = array_sum(array_column($lineItems, 'subtotal'));
+            $discount = (int) ($validated['discount'] ?? 0);
+            $total = max($subtotal - $discount, 0);
+
+            $purchase = Purchase::create([
+                'supplier_id' => $validated['supplier_id'],
+                'created_by_id' => $user->id,
+                'subtotal' => $subtotal,
+                'discount' => $discount,
+                'total' => $total,
+                'notes' => $validated['notes'] ?? null,
+            ]);
+
+            foreach ($lineItems as $itemData) {
+                $purchaseItem = $purchase->items()->create($itemData);
+                $this->incrementStock($purchaseItem);
+            }
+
+            $this->syncPhotos($purchase, $validated);
+
+            return $purchase;
+        });
+    }
+
+    /**
+     * @param  array<string, mixed>  $validated
+     */
+    public function update(Purchase $purchase, array $validated): void
+    {
+        DB::transaction(function () use ($purchase, $validated): void {
+            $purchase->load('items');
+
+            foreach ($purchase->items as $item) {
+                $this->decrementStock($item);
+            }
+
+            $purchase->items()->delete();
+
+            $lineItems = $this->buildLineItems($validated['items']);
+            $subtotal = array_sum(array_column($lineItems, 'subtotal'));
+            $discount = (int) ($validated['discount'] ?? 0);
+            $total = max($subtotal - $discount, 0);
+
+            $purchase->supplier_id = $validated['supplier_id'];
+            $purchase->subtotal = $subtotal;
+            $purchase->discount = $discount;
+            $purchase->total = $total;
+            $purchase->notes = $validated['notes'] ?? null;
+            $purchase->save();
+
+            foreach ($lineItems as $itemData) {
+                $purchaseItem = $purchase->items()->create($itemData);
+                $this->incrementStock($purchaseItem);
+            }
+
+            $this->syncPhotos($purchase, $validated);
+        });
+    }
+
+    public function delete(Purchase $purchase): void
+    {
+        DB::transaction(function () use ($purchase): void {
+            $purchase->load('items');
+
+            foreach ($purchase->items as $item) {
+                $this->decrementStock($item);
+            }
+
+            $purchase->clearMediaCollection('photos');
+            $purchase->items()->delete();
+            $purchase->delete();
+        });
+    }
+
+    /**
+     * @param  list<array{raw_material_price_id: int, quantity: float|int|string}>  $items
+     * @return list<array{raw_material_price_id: int, quantity: float, unit_price: int, subtotal: int}>
+     */
+    private function buildLineItems(array $items): array
+    {
+        return collect($items)
+            ->map(function (array $itemData, int $index) {
+                $price = RawMaterialPrice::query()->find($itemData['raw_material_price_id']);
+
+                if ($price === null) {
+                    throw ValidationException::withMessages([
+                        "items.{$index}.raw_material_price_id" => 'Bahan baku tidak ditemukan.',
+                    ]);
+                }
+
+                $quantity = (float) $itemData['quantity'];
+                $unitPrice = (int) $price->price;
+                $subtotal = (int) round($quantity * $unitPrice);
+
+                return [
+                    'raw_material_price_id' => $price->id,
+                    'quantity' => $quantity,
+                    'unit_price' => $unitPrice,
+                    'subtotal' => $subtotal,
+                ];
+            })
+            ->all();
+    }
+
+    /**
+     * @param  array<string, mixed>  $validated
+     */
+    private function syncPhotos(Purchase $purchase, array $validated): void
+    {
+        $this->mediaService->syncCollection(
+            $purchase,
+            'photos',
+            $validated['photos'] ?? null,
+            $validated['remove_media_ids'] ?? null,
+            self::MAX_PHOTOS_FILES,
+            required: false,
+            errorKey: 'photos',
+        );
+    }
+
+    private function incrementStock(PurchaseItem $item): void
+    {
+        RawMaterialPrice::query()
+            ->whereKey($item->raw_material_price_id)
+            ->increment('stock', $item->quantity);
+    }
+
+    private function decrementStock(PurchaseItem $item): void
+    {
+        RawMaterialPrice::query()
+            ->whereKey($item->raw_material_price_id)
+            ->decrement('stock', $item->quantity);
+    }
+
+    private function applySorting(Builder $query, string $sort, string $direction): void
+    {
+        if (in_array($sort, ['created_at', 'total', 'discount', 'subtotal'], true)) {
+            $query->orderBy($sort, $direction);
+
+            return;
+        }
+
+        $query->latest();
+    }
+}
diff --git a/database/migrations/2026_06_11_120001_create_purchases_table.php b/database/migrations/2026_06_11_120001_create_purchases_table.php
new file mode 100644
index 0000000..23067cf
--- /dev/null
+++ b/database/migrations/2026_06_11_120001_create_purchases_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('purchases', function (Blueprint $table) {
+            $table->id();
+
+            $table->foreignId('supplier_id')->constrained()->cascadeOnDelete();
+            $table->foreignId('created_by_id')->constrained('users')->cascadeOnDelete();
+
+            $table->unsignedBigInteger('subtotal');
+            $table->unsignedBigInteger('discount')->default(0);
+            $table->unsignedBigInteger('total');
+            $table->string('notes', 100)->nullable();
+
+            $table->timestamp('created_at')->useCurrent();
+            $table->timestamp('updated_at')->useCurrent()->useCurrentOnUpdate();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('purchases');
+    }
+};
diff --git a/database/migrations/2026_06_11_120002_create_purchase_items_table.php b/database/migrations/2026_06_11_120002_create_purchase_items_table.php
new file mode 100644
index 0000000..2c9b09e
--- /dev/null
+++ b/database/migrations/2026_06_11_120002_create_purchase_items_table.php
@@ -0,0 +1,31 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('purchase_items', function (Blueprint $table) {
+            $table->id();
+
+            $table->foreignId('purchase_id')->constrained()->cascadeOnDelete();
+            $table->foreignId('raw_material_price_id')->constrained()->cascadeOnDelete();
+
+            $table->decimal('quantity', 18, 4);
+            $table->unsignedBigInteger('unit_price');
+            $table->unsignedBigInteger('subtotal');
+
+            $table->timestamp('created_at')->useCurrent();
+            $table->timestamp('updated_at')->useCurrent()->useCurrentOnUpdate();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('purchase_items');
+    }
+};
diff --git a/package-lock.json b/package-lock.json
index 0aab0e5..1a94fe3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,7 +21,7 @@
                 "clsx": "^2.1.1",
                 "concurrently": "^9.0.1",
                 "laravel-vite-plugin": "^3.1",
-                "reka-ui": "^2.9.9",
+                "reka-ui": "^2.9.10",
                 "tailwind-merge": "^3.6.0",
                 "tailwindcss": "^4.1.1",
                 "typescript": "^5.2.2",
@@ -8922,9 +8922,9 @@
             }
         },
         "node_modules/reka-ui": {
-            "version": "2.9.9",
-            "resolved": "https://registry.npmjs.org/reka-ui/-/reka-ui-2.9.9.tgz",
-            "integrity": "sha512-/e+hdF9vP8E2kPrKR4RdgMQQsfpCr8l436Zn8GRWM3jKT9EG1lOO/UFMGBVEnrMLOVoJSjjmIFrej4tMOb+6qQ==",
+            "version": "2.9.10",
+            "resolved": "https://registry.npmjs.org/reka-ui/-/reka-ui-2.9.10.tgz",
+            "integrity": "sha512-yuvZVTp4fWH2G3qk+ze/x6YYlyc2Xl1d+eMUlIYrKqzTowBKteoDoN17fitURmqSUck3mc7JbcYgp49DnGu2EQ==",
             "license": "MIT",
             "dependencies": {
                 "@floating-ui/dom": "^1.6.13",
diff --git a/package.json b/package.json
index 6566f43..45aadc4 100644
--- a/package.json
+++ b/package.json
@@ -49,7 +49,7 @@
         "clsx": "^2.1.1",
         "concurrently": "^9.0.1",
         "laravel-vite-plugin": "^3.1",
-        "reka-ui": "^2.9.9",
+        "reka-ui": "^2.9.10",
         "tailwind-merge": "^3.6.0",
         "tailwindcss": "^4.1.1",
         "typescript": "^5.2.2",
diff --git a/resources/css/app.css b/resources/css/app.css
index 5d945ac..2fb2a57 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -52,6 +52,8 @@ @theme inline {
     --radius-2xl: calc(var(--radius) * 1.8);
     --radius-3xl: calc(var(--radius) * 2.2);
     --radius-4xl: calc(var(--radius) * 2.6);
+    --font-heading:
+        var(--font-sans);
 }
 
 :root {
diff --git a/resources/js/components/AppSidebar.vue b/resources/js/components/AppSidebar.vue
index 39c59b1..2da818f 100644
--- a/resources/js/components/AppSidebar.vue
+++ b/resources/js/components/AppSidebar.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Link, usePage } from '@inertiajs/vue3';
-import { Banknote, CalendarDays, Clock, FolderTree, Layers, LayoutDashboard, Package, Receipt, Settings2, User, UserCheck, Users, Wallet, WalletCards } from '@lucide/vue';
+import { Banknote, CalendarDays, Clock, FolderTree, Layers, LayoutDashboard, Package, Receipt, Settings2, ShoppingBag, User, UserCheck, Users, Wallet, WalletCards } from '@lucide/vue';
 import { computed } from 'vue';
 import {
     Sidebar,
@@ -29,6 +29,8 @@ const isProductsActive = computed(() => page.url.startsWith('/admin/master/produ
 const isRawMaterialsActive = computed(() => page.url.startsWith('/admin/master/raw-materials'));
 const isSuppliersActive = computed(() => page.url.startsWith('/admin/master/suppliers'));
 const isCustomersActive = computed(() => page.url.startsWith('/admin/master/customers'));
+const isPurchasesActive = computed(() => page.url.startsWith('/admin/manage/purchases'));
+const showManageMenu = computed(() => can('purchases.view'));
 const isCashActive = computed(() => page.url.startsWith('/admin/finance/cash'));
 const isExpensesActive = computed(() => page.url.startsWith('/admin/finance/expenses'));
 const isEmployeeAdvancesActive = computed(() => page.url.startsWith('/admin/finance/employee-advances'));
@@ -122,6 +124,21 @@ const showSystemMenu = computed(() => can('settings.view'));
                     </SidebarMenu>
                 </SidebarGroupContent>
             </SidebarGroup>
+            <SidebarGroup v-if="showManageMenu">
+                <SidebarGroupLabel>Kelola</SidebarGroupLabel>
+                <SidebarGroupContent>
+                    <SidebarMenu>
+                        <SidebarMenuItem v-if="can('purchases.view')">
+                            <SidebarMenuButton as-child tooltip="Belanja" :is-active="isPurchasesActive">
+                                <Link href="/admin/manage/purchases">
+                                    <ShoppingBag />
+                                    <span>Belanja</span>
+                                </Link>
+                            </SidebarMenuButton>
+                        </SidebarMenuItem>
+                    </SidebarMenu>
+                </SidebarGroupContent>
+            </SidebarGroup>
             <SidebarGroup v-if="showFinanceMenu">
                 <SidebarGroupLabel>Keuangan</SidebarGroupLabel>
                 <SidebarGroupContent>
diff --git a/resources/js/components/admin/manage/purchases/PurchaseGroupedTable.vue b/resources/js/components/admin/manage/purchases/PurchaseGroupedTable.vue
new file mode 100644
index 0000000..4d1b470
--- /dev/null
+++ b/resources/js/components/admin/manage/purchases/PurchaseGroupedTable.vue
@@ -0,0 +1,168 @@
+<script setup lang="ts">
+import { Link } from '@inertiajs/vue3';
+import { computed } from 'vue';
+import DataTableActions from '@/components/admin/manage/purchases/data-table-actions.vue';
+import DataTableToolbar from '@/components/data-table/DataTableToolbar.vue';
+import MediaThumbnailCell from '@/components/media/MediaThumbnailCell.vue';
+import { Button } from '@/components/ui/button';
+import {
+    Empty,
+    EmptyDescription,
+    EmptyHeader,
+    EmptyTitle,
+} from '@/components/ui/empty';
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from '@/components/ui/table';
+import type {
+    DataTablePagination,
+    DataTablePaginationLink,
+} from '@/types/data-table';
+import type { PurchaseListItem } from '@/types/purchase';
+
+const props = defineProps<{
+    purchases: PurchaseListItem[];
+    firstItem?: number;
+    pagination?: DataTablePagination;
+    paginationLinks?: DataTablePaginationLink[];
+}>();
+
+const search = defineModel<string>('search', { default: '' });
+
+const emit = defineEmits<{
+    'filters-reset': [];
+}>();
+
+const showingCount = computed(() => props.purchases.length);
+
+const paginationSummary = computed(() => {
+    if (!props.pagination) {
+        return null;
+    }
+
+    const { total } = props.pagination;
+
+    if (total === 0) {
+        return 'Menampilkan 0 belanja';
+    }
+
+    return `Menampilkan ${showingCount.value} belanja dari ${total}`;
+});
+
+function rowNumber(index: number): number {
+    return (props.firstItem ?? 1) + index;
+}
+</script>
+
+<template>
+    <div class="space-y-4">
+        <DataTableToolbar v-model:search="search" @filters-reset="emit('filters-reset')" />
+
+        <div v-if="purchases.length" class="space-y-4">
+            <div v-for="(purchase, index) in purchases" :key="purchase.id" class="overflow-hidden rounded-md border">
+                <div
+                    class="flex flex-col gap-3 border-b bg-muted/30 px-4 py-3 sm:flex-row sm:items-start sm:justify-between">
+                    <div class="flex min-w-0 items-start gap-3">
+                        <span class="text-muted-foreground w-8 shrink-0 pt-0.5 text-center text-sm tabular-nums">
+                            {{ rowNumber(index) }}
+                        </span>
+                        <div class="min-w-0 space-y-2">
+                            <h3 class="font-medium leading-tight">
+                                {{ purchase.supplier?.name }}
+                            </h3>
+                            <div class="text-muted-foreground space-y-1 text-sm">
+                                <p>{{ purchase.created_at_formatted }}</p>
+                                <p>Oleh {{ purchase.created_by?.profile?.full_name ?? purchase.created_by?.username }}
+                                </p>
+                            </div>
+                            <div class="flex flex-wrap gap-x-4 gap-y-1 text-sm">
+                                <span>Subtotal <strong class="text-foreground">{{ purchase.subtotal_formatted
+                                }}</strong></span>
+                                <span>Diskon <strong class="text-foreground">{{ purchase.discount_formatted
+                                }}</strong></span>
+                                <span>Total <strong class="text-primary">{{ purchase.total_formatted }}</strong></span>
+                            </div>
+                            <p v-if="purchase.notes" class="text-muted-foreground text-sm">
+                                {{ purchase.notes }}
+                            </p>
+                        </div>
+                    </div>
+
+                    <div class="flex shrink-0 items-center justify-end gap-2 sm:pt-0.5">
+                        <MediaThumbnailCell :items="purchase.photos ? [purchase.photos] : []" />
+                        <DataTableActions :purchase="purchase" />
+                    </div>
+                </div>
+
+                <Table>
+                    <TableHeader>
+                        <TableRow>
+                            <TableHead>Bahan Baku</TableHead>
+                            <TableHead>Varian</TableHead>
+                            <TableHead>Jumlah</TableHead>
+                            <TableHead>Harga Satuan</TableHead>
+                            <TableHead>Subtotal</TableHead>
+                        </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                        <TableRow v-if="!purchase.items.length" :key="`${purchase.id}-empty`">
+                            <TableCell colspan="5" class="text-muted-foreground">
+                                Belum ada item
+                            </TableCell>
+                        </TableRow>
+                        <TableRow v-for="item in purchase.items" :key="item.id">
+                            <TableCell class="font-medium">
+                                {{ item.raw_material_price?.raw_material?.name }}
+                            </TableCell>
+                            <TableCell>
+                                {{ item.raw_material_price?.variant }}
+                            </TableCell>
+                            <TableCell class="tabular-nums">
+                                {{ item.quantity_formatted }}
+                            </TableCell>
+                            <TableCell class="tabular-nums">
+                                {{ item.unit_price_formatted }}
+                            </TableCell>
+                            <TableCell class="tabular-nums font-medium">
+                                {{ item.subtotal_formatted }}
+                            </TableCell>
+                        </TableRow>
+                    </TableBody>
+                </Table>
+            </div>
+        </div>
+
+        <div v-else class="rounded-md border px-6 py-10">
+            <Empty>
+                <EmptyHeader>
+                    <EmptyTitle>Data tidak ditemukan</EmptyTitle>
+                    <EmptyDescription>
+                        Silakan lakukan pencarian untuk menemukan data yang Anda cari.
+                    </EmptyDescription>
+                </EmptyHeader>
+            </Empty>
+        </div>
+
+        <div v-if="pagination" class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+            <p class="text-muted-foreground text-sm">
+                {{ paginationSummary }}
+            </p>
+
+            <div v-if="paginationLinks?.length && pagination.lastPage > 1"
+                class="flex flex-wrap items-center justify-center gap-1 sm:justify-end">
+                <Button v-for="link in paginationLinks" :key="`${link.label}-${link.url}`" variant="outline" size="sm"
+                    :disabled="!link.url || link.active" as-child>
+                    <Link v-if="link.url" :href="link.url" preserve-scroll>
+                        <span v-html="link.label" />
+                    </Link>
+                    <span v-else v-html="link.label" />
+                </Button>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/resources/js/components/admin/manage/purchases/PurchasePosForm.vue b/resources/js/components/admin/manage/purchases/PurchasePosForm.vue
new file mode 100644
index 0000000..58a2db1
--- /dev/null
+++ b/resources/js/components/admin/manage/purchases/PurchasePosForm.vue
@@ -0,0 +1,424 @@
+<script setup lang="ts">
+import { useForm } from '@inertiajs/vue3';
+import { Minus, Plus, Save, Search, ShoppingCart, Trash2 } from '@lucide/vue';
+import { computed, ref, watch } from 'vue';
+import { toast } from 'vue-sonner';
+import MediaImageUpload from '@/components/media/MediaImageUpload.vue';
+import MediaThumbnailCell from '@/components/media/MediaThumbnailCell.vue';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import {
+    Empty,
+    EmptyDescription,
+    EmptyHeader,
+    EmptyTitle,
+} from '@/components/ui/empty';
+import {
+    Field,
+    FieldError,
+    FieldGroup,
+    FieldLabel,
+    FieldSet,
+} from '@/components/ui/field';
+import { Input } from '@/components/ui/input';
+import { RupiahInput } from '@/components/ui/rupiah-input';
+import {
+    Select,
+    SelectContent,
+    SelectGroup,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from '@/components/ui/select';
+import { Separator } from '@/components/ui/separator';
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from '@/components/ui/table';
+import { Textarea } from '@/components/ui/textarea';
+import { formatRupiah, parseRupiah } from '@/lib/rupiah';
+import type { MediaItem } from '@/types/media';
+import { appendRootPhotosToFormData, createMediaUploadState } from '@/types/media';
+import type { PurchaseCartItem, PurchaseCatalogItem, SelectOption } from '@/types/purchase';
+const props = defineProps<{
+    suppliers: SelectOption[];
+    catalog: PurchaseCatalogItem[];
+    initialData?: {
+        supplier_id: string;
+        discount: string;
+        notes: string;
+        items: PurchaseCartItem[];
+        photos?: MediaItem | null;
+    };
+    submitUrl: string;
+    method: 'post' | 'put';
+    submitLabel: string;
+}>();
+
+const search = ref('');
+const cart = ref<PurchaseCartItem[]>([]);
+
+const form = useForm({
+    supplier_id: '',
+    discount: '',
+    notes: '',
+    media: createMediaUploadState(),
+});
+
+function populateForm() {
+    if (!props.initialData) {
+        return;
+    }
+
+    form.supplier_id = props.initialData.supplier_id;
+    form.discount = props.initialData.discount;
+    form.notes = props.initialData.notes;
+    form.media = createMediaUploadState(props.initialData.photos ? [props.initialData.photos] : []);
+    cart.value = props.initialData.items.map((item) => ({ ...item }));
+}
+
+watch(
+    () => props.initialData,
+    () => {
+        populateForm();
+    },
+    { immediate: true },
+);
+
+type CatalogPrice = {
+    id: number;
+    variant: string;
+    price_input: string;
+    price_formatted: string;
+    images?: PurchaseCatalogItem['prices'][number]['images'];
+};
+
+const filteredCatalog = computed(() => {
+    const keyword = search.value.trim().toLowerCase();
+
+    if (!keyword) {
+        return props.catalog;
+    }
+
+    return props.catalog.filter((rawMaterial) =>
+        rawMaterial.name.toLowerCase().includes(keyword)
+        || rawMaterial.prices.some((price) => price.variant.toLowerCase().includes(keyword)),
+    );
+});
+
+const subtotal = computed(() =>
+    cart.value.reduce((sum, item) => sum + lineSubtotal(item), 0),
+);
+
+const discountAmount = computed(() => Number(parseRupiah(form.discount)) || 0);
+
+const total = computed(() => Math.max(subtotal.value - discountAmount.value, 0));
+
+function lineSubtotal(item: PurchaseCartItem): number {
+    const quantity = Number(item.quantity) || 0;
+
+    return Math.round(quantity * item.unit_price);
+}
+
+function addToCart(rawMaterial: PurchaseCatalogItem, price: CatalogPrice) {
+    const existing = cart.value.find(
+        (item) => item.raw_material_price_id === price.id,
+    );
+
+    if (existing) {
+        const currentQty = Number(existing.quantity) || 0;
+        existing.quantity = String(currentQty + 1);
+
+        return;
+    }
+
+    cart.value.push({
+        raw_material_price_id: price.id,
+        raw_material_name: rawMaterial.name,
+        variant: price.variant,
+        unit_abbreviation: rawMaterial.unit_abbreviation,
+        quantity: '1',
+        unit_price: Number(price.price_input),
+        images: price.images ?? [],
+    });
+}
+
+function removeFromCart(index: number) {
+    cart.value.splice(index, 1);
+}
+
+function adjustQuantity(index: number, delta: number) {
+    const item = cart.value[index];
+    const nextQty = (Number(item.quantity) || 0) + delta;
+
+    if (nextQty <= 0) {
+        removeFromCart(index);
+
+        return;
+    }
+
+    item.quantity = String(nextQty);
+}
+
+function buildFormData(): FormData {
+    const formData = new FormData();
+
+    if (props.method === 'put') {
+        formData.append('_method', 'PUT');
+    }
+
+    formData.append('supplier_id', form.supplier_id);
+    formData.append('discount', parseRupiah(form.discount));
+    formData.append('notes', form.notes);
+
+    cart.value.forEach((item, index) => {
+        formData.append(`items[${index}][raw_material_price_id]`, String(item.raw_material_price_id));
+        formData.append(`items[${index}][quantity]`, item.quantity);
+    });
+
+    appendRootPhotosToFormData(formData, form.media);
+
+    return formData;
+}
+
+function formError(key: string): string | undefined {
+    return (form.errors as Record<string, string>)[key];
+}
+
+function submit() {
+    if (cart.value.length === 0) {
+        toast.error('Tambahkan minimal satu bahan baku ke keranjang.');
+
+        return;
+    }
+
+    if (!form.supplier_id) {
+        toast.error('Pilih supplier terlebih dahulu.');
+
+        return;
+    }
+
+    const payload = buildFormData();
+
+    form.transform(() => payload).post(props.submitUrl, {
+        forceFormData: true,
+        onError: () => {
+            toast.error('Gagal menyimpan data. Periksa kembali formulir.');
+        },
+    });
+}
+</script>
+
+<template>
+    <div class="grid gap-4 xl:grid-cols-[1fr_380px]">
+        <Card class="min-w-0">
+            <CardHeader class="pb-3">
+                <CardTitle class="text-base">Pilih Bahan Baku</CardTitle>
+            </CardHeader>
+            <CardContent class="space-y-4">
+                <div class="relative">
+                    <Search class="absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" />
+                    <Input v-model="search" placeholder="Cari bahan baku..." class="pl-9" />
+                </div>
+
+                <div v-if="filteredCatalog.length === 0" class="py-12 text-center text-sm text-muted-foreground">
+                    <Empty>
+                        <EmptyHeader>
+                            <EmptyTitle>Tidak ada bahan baku ditemukan</EmptyTitle>
+                            <EmptyDescription>
+                                Silakan lakukan pencarian untuk menemukan bahan baku yang Anda cari.
+                            </EmptyDescription>
+                        </EmptyHeader>
+                    </Empty>
+                </div>
+
+                <div v-else class="space-y-4">
+                    <div v-for="rawMaterial in filteredCatalog" :key="rawMaterial.id"
+                        class="overflow-hidden rounded-md border">
+                        <div class="border-b bg-muted/30 px-4 py-3">
+                            <div class="flex flex-wrap items-center gap-2">
+                                <h3 class="font-medium leading-tight">
+                                    {{ rawMaterial.name }}
+                                </h3>
+                                <Badge variant="secondary">
+                                    {{ rawMaterial.unit_label }}
+                                </Badge>
+                            </div>
+                        </div>
+
+                        <Table>
+                            <TableHeader>
+                                <TableRow>
+                                    <TableHead>Varian</TableHead>
+                                    <TableHead>Foto</TableHead>
+                                    <TableHead>Harga</TableHead>
+                                    <TableHead class="w-24 text-right" />
+                                </TableRow>
+                            </TableHeader>
+                            <TableBody>
+                                <TableRow v-if="!rawMaterial.prices.length" :key="`${rawMaterial.id}-empty`">
+                                    <TableCell colspan="4" class="text-muted-foreground">
+                                        Belum ada varian
+                                    </TableCell>
+                                </TableRow>
+                                <TableRow v-for="price in rawMaterial.prices" :key="price.id"
+                                    class="cursor-pointer hover:bg-muted/30" @click="addToCart(rawMaterial, price)">
+                                    <TableCell class="font-medium">
+                                        {{ price.variant }}
+                                    </TableCell>
+                                    <TableCell>
+                                        <MediaThumbnailCell :items="price.images ?? []" />
+                                    </TableCell>
+                                    <TableCell class="tabular-nums">
+                                        {{ price.price_formatted }}
+                                    </TableCell>
+                                    <TableCell class="text-right">
+                                        <Button type="button" variant="outline" size="sm"
+                                            @click.stop="addToCart(rawMaterial, price)">
+                                            <Plus class="size-3.5" />
+                                            Tambah
+                                        </Button>
+                                    </TableCell>
+                                </TableRow>
+                            </TableBody>
+                        </Table>
+                    </div>
+                </div>
+            </CardContent>
+        </Card>
+
+        <Card class="h-fit xl:sticky xl:top-4">
+            <CardHeader class="pb-3">
+                <CardTitle class="flex items-center gap-2 text-base">
+                    <ShoppingCart class="size-4" />
+                    Ringkasan Belanja
+                </CardTitle>
+            </CardHeader>
+            <CardContent>
+                <form @submit.prevent="submit">
+                    <FieldGroup>
+                        <FieldSet class="grid gap-4">
+                            <Field>
+                                <FieldLabel for="supplier" required>Supplier</FieldLabel>
+                                <Select v-model="form.supplier_id">
+                                    <SelectTrigger id="supplier" class="w-full">
+                                        <SelectValue placeholder="Pilih supplier" />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                        <SelectGroup>
+                                            <SelectItem v-for="supplier in suppliers" :key="supplier.value"
+                                                :value="String(supplier.value)">
+                                                {{ supplier.label }}
+                                            </SelectItem>
+                                        </SelectGroup>
+                                    </SelectContent>
+                                </Select>
+                                <FieldError :errors="form.errors.supplier_id ? [form.errors.supplier_id] : []" />
+                            </Field>
+
+                            <div v-if="cart.length === 0"
+                                class="rounded-lg border border-dashed text-center text-sm text-muted-foreground">
+                                <Empty>
+                                    <EmptyHeader>
+                                        <EmptyTitle>Keranjang masih kosong</EmptyTitle>
+                                        <EmptyDescription>
+                                            Pilih varian bahan baku di sebelah kiri untuk menambahkan ke keranjang.
+                                        </EmptyDescription>
+                                    </EmptyHeader>
+                                </Empty>
+                            </div>
+
+                            <div v-else class="space-y-3">
+                                <div v-for="(item, index) in cart" :key="item.raw_material_price_id"
+                                    class="rounded-lg border p-3">
+                                    <div class="flex gap-3">
+                                        <div class="min-w-0 flex-1 space-y-2">
+                                            <div class="flex items-start justify-between gap-2">
+                                                <div class="min-w-0">
+                                                    <p class="truncate text-sm font-medium">
+                                                        {{ item.raw_material_name }}
+                                                    </p>
+                                                    <p class="truncate text-xs text-muted-foreground">
+                                                        {{ item.variant }}
+                                                    </p>
+                                                </div>
+                                                <Button type="button" variant="ghost" size="icon"
+                                                    class="text-destructive hover:text-destructive size-7 shrink-0"
+                                                    @click="removeFromCart(index)">
+                                                    <Trash2 class="size-3.5" />
+                                                </Button>
+                                            </div>
+
+                                            <Field>
+                                                <FieldLabel class="text-xs">Jumlah ({{ item.unit_abbreviation }})
+                                                </FieldLabel>
+                                                <div class="flex items-center gap-1">
+                                                    <Button type="button" variant="outline" size="icon"
+                                                        class="size-8 shrink-0" @click="adjustQuantity(index, -1)">
+                                                        <Minus class="size-3.5" />
+                                                    </Button>
+                                                    <Input v-model="item.quantity" type="number" min="0.0001" step="any"
+                                                        class="h-8 text-center" />
+                                                    <Button type="button" variant="outline" size="icon"
+                                                        class="size-8 shrink-0" @click="adjustQuantity(index, 1)">
+                                                        <Plus class="size-3.5" />
+                                                    </Button>
+                                                </div>
+                                            </Field>
+
+                                            <p class="text-xs text-muted-foreground">
+                                                Harga satuan Rp {{ formatRupiah(item.unit_price) }}
+                                            </p>
+
+                                            <p class="text-right text-sm font-medium">
+                                                Rp {{ formatRupiah(lineSubtotal(item)) }}
+                                            </p>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <Separator />
+
+                            <div class="space-y-2 text-sm">
+                                <div class="flex justify-between">
+                                    <span class="text-muted-foreground">Subtotal</span>
+                                    <span class="font-medium">Rp {{ formatRupiah(subtotal) }}</span>
+                                </div>
+                                <Field>
+                                    <FieldLabel for="discount">Diskon</FieldLabel>
+                                    <RupiahInput id="discount" v-model="form.discount" placeholder="0" />
+                                    <FieldError :errors="form.errors.discount ? [form.errors.discount] : []" />
+                                </Field>
+                                <div class="flex justify-between text-base font-semibold">
+                                    <span>Total</span>
+                                    <span class="text-primary">Rp {{ formatRupiah(total) }}</span>
+                                </div>
+                            </div>
+
+                            <Field>
+                                <FieldLabel for="notes">Keterangan</FieldLabel>
+                                <Textarea id="notes" v-model="form.notes" placeholder="Contoh: Belanja batch 2"
+                                    rows="2" />
+                                <FieldError :errors="form.errors.notes ? [form.errors.notes] : []" />
+                            </Field>
+
+                            <MediaImageUpload id="purchase-photos" v-model="form.media" label="Bukti Transaksi"
+                                :errors="formError('photos') ? [formError('photos')!] : []" />
+
+                            <Button type="submit" class="w-full" :disabled="form.processing || cart.length === 0">
+                                <Save class="size-4" />
+                                {{ form.processing ? 'Menyimpan...' : submitLabel }}
+                            </Button>
+                        </FieldSet>
+                    </FieldGroup>
+                </form>
+            </CardContent>
+        </Card>
+    </div>
+</template>
diff --git a/resources/js/components/admin/manage/purchases/data-table-actions.vue b/resources/js/components/admin/manage/purchases/data-table-actions.vue
new file mode 100644
index 0000000..1b12804
--- /dev/null
+++ b/resources/js/components/admin/manage/purchases/data-table-actions.vue
@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { Link, router } from '@inertiajs/vue3';
+import { Pencil, Trash2 } from '@lucide/vue';
+import { ref } from 'vue';
+import { toast } from 'vue-sonner';
+import ConfirmDialog from '@/components/ConfirmDialog.vue';
+import { Button } from '@/components/ui/button';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import { useCan } from '@/composables/useCan';
+import type { PurchaseListItem } from '@/types/purchase';
+
+const props = defineProps<{
+    purchase: PurchaseListItem;
+}>();
+
+const { can } = useCan();
+
+const deleteConfirmOpen = ref(false);
+const deleteProcessing = ref(false);
+
+function destroyPurchase() {
+    deleteProcessing.value = true;
+
+    router.delete(`/admin/manage/purchases/${props.purchase.id}`, {
+        preserveScroll: true,
+        onSuccess: () => {
+            deleteConfirmOpen.value = false;
+        },
+        onError: () => {
+            toast.error('Gagal menghapus belanja.');
+        },
+        onFinish: () => {
+            deleteProcessing.value = false;
+        },
+    });
+}
+</script>
+
+<template>
+    <div class="flex items-center justify-end gap-1">
+        <Tooltip v-if="can('purchases.update')">
+            <TooltipTrigger as-child>
+                <Button variant="ghost" size="icon" class="size-8" as-child>
+                    <Link :href="`/admin/manage/purchases/${purchase.id}/edit`">
+                        <Pencil class="size-4" />
+                        <span class="sr-only">Ubah</span>
+                    </Link>
+                </Button>
+            </TooltipTrigger>
+            <TooltipContent>Ubah</TooltipContent>
+        </Tooltip>
+
+        <Tooltip v-if="can('purchases.delete')">
+            <TooltipTrigger as-child>
+                <Button
+                    variant="ghost"
+                    size="icon"
+                    class="text-destructive hover:text-destructive size-8"
+                    @click="deleteConfirmOpen = true"
+                >
+                    <Trash2 class="size-4" />
+                    <span class="sr-only">Hapus</span>
+                </Button>
+            </TooltipTrigger>
+            <TooltipContent>Hapus</TooltipContent>
+        </Tooltip>
+    </div>
+
+    <ConfirmDialog
+        v-if="can('purchases.delete')"
+        v-model:open="deleteConfirmOpen"
+        title="Hapus belanja?"
+        :description="`Belanja ${purchase.total_formatted} dari ${purchase.supplier_name} akan dihapus. Stok bahan baku akan dikurangi.`"
+        confirm-label="Hapus"
+        cancel-label="Batal"
+        destructive
+        :loading="deleteProcessing"
+        @confirm="destroyPurchase"
+    />
+</template>
diff --git a/resources/js/components/media/MediaThumbnailCell.vue b/resources/js/components/media/MediaThumbnailCell.vue
index 1381cf9..fe7687a 100644
--- a/resources/js/components/media/MediaThumbnailCell.vue
+++ b/resources/js/components/media/MediaThumbnailCell.vue
@@ -35,7 +35,6 @@ function openPreview(url: string) {
             +{{ hiddenCount }}
         </span>
     </div>
-    <span v-else class="text-muted-foreground">-</span>
 
     <MediaPreviewDialog v-model:open="previewOpen" :url="previewUrl" />
 </template>
diff --git a/resources/js/pages/admin/manage/purchases/Create.vue b/resources/js/pages/admin/manage/purchases/Create.vue
new file mode 100644
index 0000000..530aa52
--- /dev/null
+++ b/resources/js/pages/admin/manage/purchases/Create.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { Head, Link } from '@inertiajs/vue3';
+import { ArrowLeft } from '@lucide/vue';
+import PurchasePosForm from '@/components/admin/manage/purchases/PurchasePosForm.vue';
+import { Button } from '@/components/ui/button';
+import AdminLayout from '@/layouts/AdminLayout.vue';
+import type { PurchaseCatalogItem, SelectOption } from '@/types/purchase';
+
+defineProps<{
+    suppliers: SelectOption[];
+    catalog: PurchaseCatalogItem[];
+}>();
+</script>
+
+<template>
+    <Head title="Tambah Belanja" />
+
+    <AdminLayout title="Tambah Belanja">
+        <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+            <div class="space-y-1">
+                <h2 class="text-2xl font-bold tracking-tight">
+                    Tambah Belanja
+                </h2>
+            </div>
+
+            <Button variant="outline" as-child class="shrink-0 self-start sm:self-center">
+                <Link href="/admin/manage/purchases">
+                    <ArrowLeft class="size-4" />
+                    Kembali
+                </Link>
+            </Button>
+        </div>
+
+        <PurchasePosForm
+            :suppliers="suppliers"
+            :catalog="catalog"
+            submit-url="/admin/manage/purchases"
+            method="post"
+            submit-label="Simpan"
+        />
+    </AdminLayout>
+</template>
diff --git a/resources/js/pages/admin/manage/purchases/Edit.vue b/resources/js/pages/admin/manage/purchases/Edit.vue
new file mode 100644
index 0000000..0beb98e
--- /dev/null
+++ b/resources/js/pages/admin/manage/purchases/Edit.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { Head, Link } from '@inertiajs/vue3';
+import { ArrowLeft } from '@lucide/vue';
+import { computed } from 'vue';
+import PurchasePosForm from '@/components/admin/manage/purchases/PurchasePosForm.vue';
+import { Button } from '@/components/ui/button';
+import AdminLayout from '@/layouts/AdminLayout.vue';
+import type { PurchaseCatalogItem, PurchaseEditItem, SelectOption } from '@/types/purchase';
+
+const props = defineProps<{
+    purchase: PurchaseEditItem;
+    suppliers: SelectOption[];
+    catalog: PurchaseCatalogItem[];
+}>();
+
+const initialData = computed(() => ({
+    supplier_id: String(props.purchase.supplier_id),
+    discount: String(props.purchase.discount),
+    notes: props.purchase.notes ?? '',
+    items: props.purchase.items.map((item) => ({
+        raw_material_price_id: item.raw_material_price_id,
+        raw_material_name: item.raw_material_name,
+        variant: item.variant_name,
+        unit_abbreviation: item.unit_abbreviation,
+        quantity: item.quantity_input,
+        unit_price: item.unit_price,
+        thumb_url: item.raw_material_price?.images?.[0]?.thumb_url ?? null,
+    })),
+    photos: props.purchase.photos ?? null,
+}));
+</script>
+
+<template>
+    <Head title="Ubah Belanja" />
+
+    <AdminLayout title="Ubah Belanja">
+        <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+            <div class="space-y-1">
+                <h2 class="text-2xl font-bold tracking-tight">
+                    Ubah Belanja
+                </h2>
+            </div>
+
+            <Button variant="outline" as-child class="shrink-0 self-start sm:self-center">
+                <Link href="/admin/manage/purchases">
+                    <ArrowLeft class="size-4" />
+                    Kembali
+                </Link>
+            </Button>
+        </div>
+
+        <PurchasePosForm
+            :suppliers="suppliers"
+            :catalog="catalog"
+            :initial-data="initialData"
+            :submit-url="`/admin/manage/purchases/${purchase.id}`"
+            method="put"
+            submit-label="Perbarui"
+        />
+    </AdminLayout>
+</template>
diff --git a/resources/js/pages/admin/manage/purchases/Index.vue b/resources/js/pages/admin/manage/purchases/Index.vue
new file mode 100644
index 0000000..cd0ca80
--- /dev/null
+++ b/resources/js/pages/admin/manage/purchases/Index.vue
@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { Head, Link } from '@inertiajs/vue3';
+import { Plus } from '@lucide/vue';
+import { computed, ref, watch } from 'vue';
+import PurchaseGroupedTable from '@/components/admin/manage/purchases/PurchaseGroupedTable.vue';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import { useCan } from '@/composables/useCan';
+import { useDataTableQuery, useDataTableQuerySync } from '@/composables/useDataTableQuery';
+import AdminLayout from '@/layouts/AdminLayout.vue';
+import type { PaginatedPurchases } from '@/types/purchase';
+
+const props = defineProps<{
+    purchases: PaginatedPurchases;
+    filters: {
+        search: string;
+        sort?: string;
+        direction?: 'asc' | 'desc';
+    };
+}>();
+
+const { can } = useCan();
+const search = ref(props.filters.search ?? '');
+
+const { setSearch, resetFilters, syncFromServer } = useDataTableQuery({
+    url: '/admin/manage/purchases',
+    initial: { ...props.filters },
+});
+
+useDataTableQuerySync(() => props.filters, syncFromServer);
+
+const tablePagination = computed(() => ({
+    currentPage: props.purchases.current_page,
+    perPage: props.purchases.per_page,
+    lastPage: props.purchases.last_page,
+    total: props.purchases.total,
+}));
+
+const firstItem = computed(() => (
+    props.purchases.data.length > 0
+        ? (props.purchases.current_page - 1) * props.purchases.per_page + 1
+        : 0
+));
+
+watch(search, (value) => {
+    setSearch(value);
+});
+
+watch(
+    () => props.filters.search,
+    (value) => {
+        search.value = value ?? '';
+    },
+);
+</script>
+
+<template>
+    <Head title="Belanja" />
+
+    <AdminLayout>
+        <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+            <div class="space-y-1">
+                <h2 class="text-2xl font-bold tracking-tight">
+                    Belanja
+                </h2>
+            </div>
+
+            <Button v-if="can('purchases.create')" as-child class="shrink-0 self-start sm:self-center">
+                <Link href="/admin/manage/purchases/create">
+                    <Plus class="size-4" />
+                    Tambah
+                </Link>
+            </Button>
+        </div>
+
+        <Card class="min-w-0">
+            <CardContent class="min-w-0">
+                <PurchaseGroupedTable
+                    v-model:search="search"
+                    :purchases="purchases.data"
+                    :first-item="firstItem"
+                    :pagination="tablePagination"
+                    :pagination-links="purchases.links"
+                    @filters-reset="resetFilters"
+                />
+            </CardContent>
+        </Card>
+    </AdminLayout>
+</template>
diff --git a/resources/js/types/purchase.ts b/resources/js/types/purchase.ts
new file mode 100644
index 0000000..b9ed4d1
--- /dev/null
+++ b/resources/js/types/purchase.ts
@@ -0,0 +1,80 @@
+import type { MediaItem } from '@/types/media';
+import type { RawMaterialListItem } from '@/types/raw-material';
+
+export type SelectOption = {
+    value: number;
+    label: string;
+};
+
+export type PurchaseItemListItem = {
+    id: number;
+    raw_material_name: string;
+    variant_name: string;
+    quantity_formatted: string;
+    unit_price_formatted: string;
+    subtotal_formatted: string;
+};
+
+export type PurchaseListItem = {
+    id: number;
+    supplier_name: string;
+    subtotal_formatted: string;
+    discount_formatted: string;
+    total_formatted: string;
+    notes: string | null;
+    created_at_formatted: string;
+    created_by_name: string;
+    photos?: MediaItem | null;
+    items: PurchaseItemListItem[];
+};
+
+export type PurchaseCartItem = {
+    raw_material_price_id: number;
+    raw_material_name: string;
+    variant: string;
+    unit_abbreviation: string;
+    quantity: string;
+    unit_price: number;
+    images?: MediaItem[];
+};
+
+export type PurchaseFormData = {
+    supplier_id: string;
+    discount: string;
+    notes: string;
+    items: PurchaseCartItem[];
+};
+
+export type PurchaseEditItem = {
+    id: number;
+    supplier_id: number;
+    discount: number;
+    notes: string | null;
+    photos?: MediaItem | null;
+    items: Array<{
+        raw_material_price_id: number;
+        raw_material_name: string;
+        variant_name: string;
+        unit_abbreviation: string;
+        quantity_input: string;
+        unit_price: number;
+        raw_material_price?: {
+            images?: MediaItem[];
+        };
+    }>;
+};
+
+export type PaginatedPurchases = {
+    data: PurchaseListItem[];
+    current_page: number;
+    last_page: number;
+    per_page: number;
+    total: number;
+    links: Array<{
+        url: string | null;
+        label: string;
+        active: boolean;
+    }>;
+};
+
+export type PurchaseCatalogItem = RawMaterialListItem;
diff --git a/routes/web.php b/routes/web.php
index cf5f15c..283bf98 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -13,6 +13,7 @@
 use App\Http\Controllers\Admin\Hr\AttendanceController;
 use App\Http\Controllers\Admin\Hr\EmployeeController;
 use App\Http\Controllers\Admin\Hr\LeaveRequestController;
+use App\Http\Controllers\Admin\Manage\PurchaseController;
 use App\Http\Controllers\Admin\Master\CategoryController;
 use App\Http\Controllers\Admin\Master\CustomerController;
 use App\Http\Controllers\Admin\Master\ProductController;
@@ -154,6 +155,34 @@
 
         });
 
+        Route::prefix('manage')->name('manage.')->group(function () {
+            Route::prefix('purchases')->name('purchases.')
+                ->middleware('permission:'.Permission::PURCHASES_VIEW->value)
+                ->group(function () {
+                    Route::get('/', [PurchaseController::class, 'index'])->name('index');
+
+                    Route::get('create', [PurchaseController::class, 'create'])
+                        ->middleware('permission:'.Permission::PURCHASES_CREATE->value)
+                        ->name('create');
+
+                    Route::post('/', [PurchaseController::class, 'store'])
+                        ->middleware('permission:'.Permission::PURCHASES_CREATE->value)
+                        ->name('store');
+
+                    Route::get('{purchase}/edit', [PurchaseController::class, 'edit'])
+                        ->middleware('permission:'.Permission::PURCHASES_UPDATE->value)
+                        ->name('edit');
+
+                    Route::put('{purchase}', [PurchaseController::class, 'update'])
+                        ->middleware('permission:'.Permission::PURCHASES_UPDATE->value)
+                        ->name('update');
+
+                    Route::delete('{purchase}', [PurchaseController::class, 'destroy'])
+                        ->middleware('permission:'.Permission::PURCHASES_DELETE->value)
+                        ->name('destroy');
+                });
+        });
+
         Route::prefix('system')->name('system.')->group(function () {
             Route::prefix('setting')->name('setting.')
                 ->middleware('permission:'.Permission::SETTINGS_VIEW->value)