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)