From 9e3325c16ab7926b282ef4a2827699d4e47671d2 Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Wed, 10 Jun 2026 14:00:29 +0700
Subject: [PATCH] Add raw materials management features including permissions
 in the Permission and Role enums, routes for CRUD operations in
 RawMaterialController, and UI updates in the sidebar for raw materials
 navigation. Enhance the application structure to support raw materials
 alongside existing product and category management.

---
 app/Enums/Permission.php                      |  14 +
 app/Enums/RawMaterialUnit.php                 |  40 ++
 app/Enums/Role.php                            |  15 +-
 .../Admin/RawMaterialController.php           | 278 +++++++++++++
 .../Requests/Admin/RawMaterialRequest.php     |  43 ++
 app/Models/RawMaterial.php                    |  42 ++
 app/Models/RawMaterialPrice.php               |  27 ++
 ...6_10_110001_create_raw_materials_table.php |  28 ++
 ...10002_create_raw_material_prices_table.php |  30 ++
 resources/js/components/AppSidebar.vue        |  15 +-
 .../raw-materials/RawMaterialForm.vue         | 374 ++++++++++++++++++
 .../raw-materials/RawMaterialGroupedTable.vue | 179 +++++++++
 .../raw-materials/data-table-actions.vue      |  79 ++++
 .../raw-material-status-toggle.vue            |  61 +++
 resources/js/lib/raw-materials.ts             |  30 ++
 .../js/pages/admin/raw-materials/Create.vue   |  41 ++
 .../js/pages/admin/raw-materials/Edit.vue     |  50 +++
 .../js/pages/admin/raw-materials/Index.vue    | 111 ++++++
 resources/js/types/raw-material.ts            |  77 ++++
 routes/web.php                                |  31 ++
 20 files changed, 1558 insertions(+), 7 deletions(-)
 create mode 100644 app/Enums/RawMaterialUnit.php
 create mode 100644 app/Http/Controllers/Admin/RawMaterialController.php
 create mode 100644 app/Http/Requests/Admin/RawMaterialRequest.php
 create mode 100644 app/Models/RawMaterial.php
 create mode 100644 app/Models/RawMaterialPrice.php
 create mode 100644 database/migrations/2026_06_10_110001_create_raw_materials_table.php
 create mode 100644 database/migrations/2026_06_10_110002_create_raw_material_prices_table.php
 create mode 100644 resources/js/components/raw-materials/RawMaterialForm.vue
 create mode 100644 resources/js/components/raw-materials/RawMaterialGroupedTable.vue
 create mode 100644 resources/js/components/raw-materials/data-table-actions.vue
 create mode 100644 resources/js/components/raw-materials/raw-material-status-toggle.vue
 create mode 100644 resources/js/lib/raw-materials.ts
 create mode 100644 resources/js/pages/admin/raw-materials/Create.vue
 create mode 100644 resources/js/pages/admin/raw-materials/Edit.vue
 create mode 100644 resources/js/pages/admin/raw-materials/Index.vue
 create mode 100644 resources/js/types/raw-material.ts

diff --git a/app/Enums/Permission.php b/app/Enums/Permission.php
index c97e998..798c144 100644
--- a/app/Enums/Permission.php
+++ b/app/Enums/Permission.php
@@ -28,6 +28,12 @@ enum Permission: string
     case PRODUCTS_DELETE = 'products.delete';
     case PRODUCTS_TOGGLE_STATUS = 'products.toggle-status';
 
+    case RAW_MATERIALS_VIEW = 'raw-materials.view';
+    case RAW_MATERIALS_CREATE = 'raw-materials.create';
+    case RAW_MATERIALS_UPDATE = 'raw-materials.update';
+    case RAW_MATERIALS_DELETE = 'raw-materials.delete';
+    case RAW_MATERIALS_TOGGLE_STATUS = 'raw-materials.toggle-status';
+
     public function label(): string
     {
         return match ($this) {
@@ -50,6 +56,12 @@ public function label(): string
             self::PRODUCTS_UPDATE => 'Ubah Produk',
             self::PRODUCTS_DELETE => 'Hapus Produk',
             self::PRODUCTS_TOGGLE_STATUS => 'Ubah Status Produk',
+
+            self::RAW_MATERIALS_VIEW => 'Lihat Bahan Baku',
+            self::RAW_MATERIALS_CREATE => 'Tambah Bahan Baku',
+            self::RAW_MATERIALS_UPDATE => 'Ubah Bahan Baku',
+            self::RAW_MATERIALS_DELETE => 'Hapus Bahan Baku',
+            self::RAW_MATERIALS_TOGGLE_STATUS => 'Ubah Status Bahan Baku',
         };
     }
 
@@ -63,6 +75,8 @@ public function group(): string
             self::CATEGORIES_DELETE => 'Kategori',
             self::PRODUCTS_VIEW, self::PRODUCTS_CREATE, self::PRODUCTS_UPDATE,
             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',
         };
     }
 
diff --git a/app/Enums/RawMaterialUnit.php b/app/Enums/RawMaterialUnit.php
new file mode 100644
index 0000000..2d3596a
--- /dev/null
+++ b/app/Enums/RawMaterialUnit.php
@@ -0,0 +1,40 @@
+<?php
+
+namespace App\Enums;
+
+use App\Traits\ProvidesEnumOptions;
+
+enum RawMaterialUnit: string
+{
+    use ProvidesEnumOptions;
+
+    case YARD = 'yard';
+    case METER = 'meter';
+    case KILOGRAM = 'kilogram';
+
+    public function label(): string
+    {
+        return match ($this) {
+            self::YARD => 'Yard',
+            self::METER => 'Meter',
+            self::KILOGRAM => 'Kilogram',
+        };
+    }
+
+    public function abbreviation(): string
+    {
+        return match ($this) {
+            self::YARD => 'yard',
+            self::METER => 'm',
+            self::KILOGRAM => 'kg',
+        };
+    }
+
+    /**
+     * @return list<string>
+     */
+    public static function values(): array
+    {
+        return array_column(self::cases(), 'value');
+    }
+}
diff --git a/app/Enums/Role.php b/app/Enums/Role.php
index caa9a97..ef3b76e 100644
--- a/app/Enums/Role.php
+++ b/app/Enums/Role.php
@@ -53,6 +53,11 @@ public function permissions(): array
                 Permission::PRODUCTS_UPDATE,
                 Permission::PRODUCTS_DELETE,
                 Permission::PRODUCTS_TOGGLE_STATUS,
+                Permission::RAW_MATERIALS_VIEW,
+                Permission::RAW_MATERIALS_CREATE,
+                Permission::RAW_MATERIALS_UPDATE,
+                Permission::RAW_MATERIALS_DELETE,
+                Permission::RAW_MATERIALS_TOGGLE_STATUS,
             ],
             self::ADMIN_TOKO => [
                 Permission::DASHBOARD_VIEW,
@@ -78,11 +83,11 @@ public function permissions(): array
                 Permission::CATEGORIES_CREATE,
                 Permission::CATEGORIES_UPDATE,
                 Permission::CATEGORIES_DELETE,
-                Permission::PRODUCTS_VIEW,
-                Permission::PRODUCTS_CREATE,
-                Permission::PRODUCTS_UPDATE,
-                Permission::PRODUCTS_DELETE,
-                Permission::PRODUCTS_TOGGLE_STATUS,
+                Permission::RAW_MATERIALS_VIEW,
+                Permission::RAW_MATERIALS_CREATE,
+                Permission::RAW_MATERIALS_UPDATE,
+                Permission::RAW_MATERIALS_DELETE,
+                Permission::RAW_MATERIALS_TOGGLE_STATUS,
             ],
             self::MARKETING => [
                 Permission::DASHBOARD_VIEW,
diff --git a/app/Http/Controllers/Admin/RawMaterialController.php b/app/Http/Controllers/Admin/RawMaterialController.php
new file mode 100644
index 0000000..80fc710
--- /dev/null
+++ b/app/Http/Controllers/Admin/RawMaterialController.php
@@ -0,0 +1,278 @@
+<?php
+
+namespace App\Http\Controllers\Admin;
+
+use App\Enums\RawMaterialUnit;
+use App\Http\Controllers\Concerns\ParsesDataTableQuery;
+use App\Http\Controllers\Controller;
+use App\Http\Requests\Admin\RawMaterialRequest;
+use App\Models\RawMaterial;
+use App\Models\RawMaterialPrice;
+use Illuminate\Database\Eloquent\Builder;
+use Illuminate\Http\RedirectResponse;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\DB;
+use Inertia\Inertia;
+use Inertia\Response;
+
+class RawMaterialController extends Controller
+{
+    use ParsesDataTableQuery;
+
+    public function index(Request $request): Response
+    {
+        $tableQuery = $this->parseDataTableQuery($request);
+        $search = $tableQuery['search'];
+        $sort = $tableQuery['sort'];
+        $direction = $tableQuery['direction'];
+        $isActive = $request->string('is_active')->toString();
+
+        $query = RawMaterial::query()
+            ->with([
+                'prices' => fn ($query) => $query->orderBy('created_at'),
+            ])
+            ->when($search !== '', function (Builder $query) use ($search): void {
+                $query->where(function (Builder $query) use ($search): void {
+                    $query->where('name', 'like', "%{$search}%")
+                        ->orWhereHas('prices', fn (Builder $query) => $query->where('variant', 'like', "%{$search}%"));
+                });
+            })
+            ->when(
+                $isActive !== '',
+                fn (Builder $query) => $query->where('is_active', $isActive === '1')
+            );
+
+        $this->applySorting($query, $sort, $direction);
+
+        $rawMaterials = $query
+            ->paginate(10)
+            ->withQueryString();
+
+        $rows = $rawMaterials->getCollection()
+            ->flatMap(fn (RawMaterial $rawMaterial, int $index) => $this->flattenRawMaterialForTable(
+                $rawMaterial,
+                $index,
+                $rawMaterials->firstItem() ?? 1,
+            ))
+            ->values()
+            ->all();
+
+        return Inertia::render('admin/raw-materials/Index', [
+            'rows' => $rows,
+            'pagination' => [
+                'current_page' => $rawMaterials->currentPage(),
+                'last_page' => $rawMaterials->lastPage(),
+                'per_page' => $rawMaterials->perPage(),
+                'total' => $rawMaterials->total(),
+                'links' => $rawMaterials->linkCollection()->toArray(),
+            ],
+            'filters' => $this->dataTableFilters($tableQuery, [
+                'is_active' => $isActive,
+            ]),
+        ]);
+    }
+
+    public function create(): Response
+    {
+        return Inertia::render('admin/raw-materials/Create', [
+            'units' => RawMaterialUnit::selectOptions(),
+        ]);
+    }
+
+    public function store(RawMaterialRequest $request): RedirectResponse
+    {
+        $validated = $request->validated();
+
+        DB::transaction(function () use ($validated): void {
+            $rawMaterial = RawMaterial::create([
+                'name' => $validated['name'],
+                'unit' => $validated['unit'],
+            ]);
+
+            foreach ($validated['prices'] as $priceData) {
+                $this->createPrice($rawMaterial, $priceData);
+            }
+        });
+
+        Inertia::flash('success', 'Bahan baku berhasil ditambahkan.');
+
+        return redirect()->route('admin.master.raw-materials.index');
+    }
+
+    public function edit(RawMaterial $rawMaterial): Response
+    {
+        $rawMaterial->load([
+            'prices' => fn ($query) => $query->orderBy('created_at'),
+        ]);
+
+        return Inertia::render('admin/raw-materials/Edit', [
+            'units' => RawMaterialUnit::selectOptions(),
+            'rawMaterial' => $this->transformRawMaterialForForm($rawMaterial),
+        ]);
+    }
+
+    public function update(RawMaterialRequest $request, RawMaterial $rawMaterial): RedirectResponse
+    {
+        $validated = $request->validated();
+
+        DB::transaction(function () use ($validated, $rawMaterial): void {
+            $rawMaterial->name = $validated['name'];
+            $rawMaterial->unit = $validated['unit'];
+            $rawMaterial->save();
+
+            $submittedPriceIds = collect($validated['prices'])
+                ->pluck('id')
+                ->filter()
+                ->map(fn ($id) => (int) $id)
+                ->all();
+
+            $rawMaterial->prices()
+                ->whereNotIn('id', $submittedPriceIds)
+                ->get()
+                ->each(fn (RawMaterialPrice $price) => $price->delete());
+
+            foreach ($validated['prices'] as $priceData) {
+                if (! empty($priceData['id'])) {
+                    $price = $rawMaterial->prices()->findOrFail($priceData['id']);
+                    $price->variant = $priceData['variant'];
+                    $price->price = $priceData['price'];
+                    $price->stock = $priceData['stock'];
+                    $price->save();
+
+                    continue;
+                }
+
+                $this->createPrice($rawMaterial, $priceData);
+            }
+        });
+
+        Inertia::flash('success', 'Bahan baku berhasil diperbarui.');
+
+        return redirect()->route('admin.master.raw-materials.index');
+    }
+
+    public function toggleStatus(Request $request, RawMaterial $rawMaterial): RedirectResponse
+    {
+        $validated = $request->validate([
+            'is_active' => ['required', 'boolean'],
+        ]);
+
+        $rawMaterial->is_active = $validated['is_active'];
+        $rawMaterial->save();
+
+        Inertia::flash('success', 'Status bahan baku berhasil diperbarui.');
+
+        return back();
+    }
+
+    public function destroy(RawMaterial $rawMaterial): RedirectResponse
+    {
+        DB::transaction(function () use ($rawMaterial): void {
+            $rawMaterial->prices()->delete();
+            $rawMaterial->delete();
+        });
+
+        Inertia::flash('success', 'Bahan baku berhasil dihapus.');
+
+        return redirect()->route('admin.master.raw-materials.index');
+    }
+
+    private function applySorting(Builder $query, string $sort, string $direction): void
+    {
+        if (in_array($sort, ['name', 'unit', 'is_active'], true)) {
+            $query->orderBy($sort, $direction);
+
+            return;
+        }
+
+        $query->latest();
+    }
+
+    /**
+     * @param  array<string, mixed>  $priceData
+     */
+    private function createPrice(RawMaterial $rawMaterial, array $priceData): RawMaterialPrice
+    {
+        return $rawMaterial->prices()->create([
+            'variant' => $priceData['variant'],
+            'price' => $priceData['price'],
+            'stock' => $priceData['stock'],
+        ]);
+    }
+
+    /**
+     * @return list<array<string, mixed>>
+     */
+    private function flattenRawMaterialForTable(RawMaterial $rawMaterial, int $materialIndex, int $firstItem): array
+    {
+        $prices = $rawMaterial->prices->isNotEmpty()
+            ? $rawMaterial->prices
+            : collect([null]);
+
+        $variantCount = $prices->count();
+
+        return $prices
+            ->values()
+            ->map(function ($price, int $variantIndex) use ($rawMaterial, $materialIndex, $firstItem, $variantCount) {
+                return [
+                    'row_id' => $price
+                        ? "{$rawMaterial->id}-{$price->id}"
+                        : "{$rawMaterial->id}-empty",
+                    'raw_material_id' => $rawMaterial->id,
+                    'raw_material_name' => $rawMaterial->name,
+                    'unit' => $rawMaterial->unit->value,
+                    'unit_label' => $rawMaterial->unit->label(),
+                    'unit_abbreviation' => $rawMaterial->unit->abbreviation(),
+                    'is_active' => $rawMaterial->is_active,
+                    'is_first_variant' => $variantIndex === 0,
+                    'variant_count' => $variantCount,
+                    'raw_material_row_number' => $firstItem + $materialIndex,
+                    'price_id' => $price?->id,
+                    'variant' => $price?->variant,
+                    'stock' => $price?->stock,
+                    'stock_formatted' => $price ? $this->formatStock($price->stock, $rawMaterial->unit) : null,
+                    'price' => $price?->price,
+                    'price_formatted' => $price ? $this->formatPrice($price->price) : null,
+                ];
+            })
+            ->all();
+    }
+
+    /**
+     * @return array<string, mixed>
+     */
+    private function transformRawMaterialForForm(RawMaterial $rawMaterial): array
+    {
+        return [
+            'id' => $rawMaterial->id,
+            'name' => $rawMaterial->name,
+            'unit' => $rawMaterial->unit->value,
+            'prices' => $rawMaterial->prices
+                ->map(fn (RawMaterialPrice $price) => [
+                    'id' => $price->id,
+                    'variant' => $price->variant,
+                    'price' => (string) (int) $price->price,
+                    'stock' => $this->formatStockInput($price->stock),
+                ])
+                ->values()
+                ->all(),
+        ];
+    }
+
+    private function formatPrice(float|string $price): string
+    {
+        return 'Rp '.number_format((float) $price, 0, ',', '.');
+    }
+
+    private function formatStock(float|string $stock, RawMaterialUnit $unit): string
+    {
+        $formatted = rtrim(rtrim(number_format((float) $stock, 4, ',', '.'), '0'), ',');
+
+        return "{$formatted} {$unit->abbreviation()}";
+    }
+
+    private function formatStockInput(float|string $stock): string
+    {
+        return rtrim(rtrim(number_format((float) $stock, 4, '.', ''), '0'), '.');
+    }
+}
diff --git a/app/Http/Requests/Admin/RawMaterialRequest.php b/app/Http/Requests/Admin/RawMaterialRequest.php
new file mode 100644
index 0000000..50de1d6
--- /dev/null
+++ b/app/Http/Requests/Admin/RawMaterialRequest.php
@@ -0,0 +1,43 @@
+<?php
+
+namespace App\Http\Requests\Admin;
+
+use App\Enums\Permission;
+use App\Enums\RawMaterialUnit;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Validation\Rule;
+use Illuminate\Validation\Validator;
+
+class RawMaterialRequest extends FormRequest
+{
+    public function authorize(): bool
+    {
+        $permission = $this->isMethod('POST')
+            ? Permission::RAW_MATERIALS_CREATE
+            : Permission::RAW_MATERIALS_UPDATE;
+
+        return $this->user()?->can($permission->value) ?? false;
+    }
+
+    /**
+     * @return array<string, mixed>
+     */
+    public function rules(): array
+    {
+        return [
+            'name' => ['required', 'string', 'max:200'],
+            'unit' => ['required', Rule::enum(RawMaterialUnit::class)],
+            'prices' => ['required', 'array', 'min:1'],
+            'prices.*.id' => [
+                'nullable',
+                'integer',
+                Rule::exists('raw_material_prices', 'id')
+                    ->where('raw_material_id', $this->route('rawMaterial')?->id)
+                    ->whereNull('deleted_at'),
+            ],
+            'prices.*.variant' => ['required', 'string', 'max:200'],
+            'prices.*.price' => ['required', 'numeric', 'gt:0'],
+            'prices.*.stock' => ['required', 'numeric', 'min:0'],
+        ];
+    }
+}
diff --git a/app/Models/RawMaterial.php b/app/Models/RawMaterial.php
new file mode 100644
index 0000000..a1013dc
--- /dev/null
+++ b/app/Models/RawMaterial.php
@@ -0,0 +1,42 @@
+<?php
+
+namespace App\Models;
+
+use App\Enums\RawMaterialUnit;
+use Illuminate\Database\Eloquent\Attributes\Guarded;
+use Illuminate\Database\Eloquent\Attributes\Scope;
+use Illuminate\Database\Eloquent\Builder;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\HasMany;
+use Illuminate\Database\Eloquent\SoftDeletes;
+
+#[Guarded(['id'])]
+class RawMaterial extends Model
+{
+    use SoftDeletes;
+
+    protected function casts(): array
+    {
+        return [
+            'is_active' => 'boolean',
+            'unit' => RawMaterialUnit::class,
+        ];
+    }
+
+    #[Scope]
+    public function active(Builder $query): void
+    {
+        $query->where('is_active', true);
+    }
+
+    #[Scope]
+    public function inactive(Builder $query): void
+    {
+        $query->where('is_active', false);
+    }
+
+    public function prices(): HasMany
+    {
+        return $this->hasMany(RawMaterialPrice::class);
+    }
+}
diff --git a/app/Models/RawMaterialPrice.php b/app/Models/RawMaterialPrice.php
new file mode 100644
index 0000000..0a8c822
--- /dev/null
+++ b/app/Models/RawMaterialPrice.php
@@ -0,0 +1,27 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Attributes\Guarded;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
+use Illuminate\Database\Eloquent\SoftDeletes;
+
+#[Guarded(['id'])]
+class RawMaterialPrice extends Model
+{
+    use SoftDeletes;
+
+    protected function casts(): array
+    {
+        return [
+            'price' => 'decimal:2',
+            'stock' => 'decimal:4',
+        ];
+    }
+
+    public function rawMaterial(): BelongsTo
+    {
+        return $this->belongsTo(RawMaterial::class);
+    }
+}
diff --git a/database/migrations/2026_06_10_110001_create_raw_materials_table.php b/database/migrations/2026_06_10_110001_create_raw_materials_table.php
new file mode 100644
index 0000000..86dd2f3
--- /dev/null
+++ b/database/migrations/2026_06_10_110001_create_raw_materials_table.php
@@ -0,0 +1,28 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('raw_materials', function (Blueprint $table) {
+            $table->id();
+
+            $table->string('name', 200);
+            $table->string('unit', 20);
+            $table->boolean('is_active')->default(true);
+
+            $table->timestamp('created_at')->useCurrent();
+            $table->timestamp('updated_at')->useCurrent()->useCurrentOnUpdate();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('raw_materials');
+    }
+};
diff --git a/database/migrations/2026_06_10_110002_create_raw_material_prices_table.php b/database/migrations/2026_06_10_110002_create_raw_material_prices_table.php
new file mode 100644
index 0000000..e942ef8
--- /dev/null
+++ b/database/migrations/2026_06_10_110002_create_raw_material_prices_table.php
@@ -0,0 +1,30 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('raw_material_prices', function (Blueprint $table) {
+            $table->id();
+
+            $table->foreignId('raw_material_id')->constrained()->cascadeOnDelete();
+
+            $table->string('variant', 200);
+            $table->decimal('price', 18, 2);
+            $table->decimal('stock', 18, 4)->default(0);
+
+            $table->timestamp('created_at')->useCurrent();
+            $table->timestamp('updated_at')->useCurrent()->useCurrentOnUpdate();
+            $table->softDeletes();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('raw_material_prices');
+    }
+};
diff --git a/resources/js/components/AppSidebar.vue b/resources/js/components/AppSidebar.vue
index 6b4e060..cfa7af2 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 { FolderTree, LayoutDashboard, Package, Users } from '@lucide/vue';
+import { FolderTree, Layers, LayoutDashboard, Package, Users } from '@lucide/vue';
 import { computed } from 'vue';
 import {
     Sidebar,
@@ -23,7 +23,10 @@ const isDashboardActive = computed(() => page.url.startsWith('/admin/dashboard')
 const isEmployeesActive = computed(() => page.url.startsWith('/admin/hr/employees'));
 const isCategoriesActive = computed(() => page.url.startsWith('/admin/master/categories'));
 const isProductsActive = computed(() => page.url.startsWith('/admin/master/products'));
-const showMasterMenu = computed(() => can('categories.view') || can('products.view'));
+const isRawMaterialsActive = computed(() => page.url.startsWith('/admin/master/raw-materials'));
+const showMasterMenu = computed(() => (
+    can('categories.view') || can('products.view') || can('raw-materials.view')
+));
 </script>
 
 <template>
@@ -77,6 +80,14 @@ const showMasterMenu = computed(() => can('categories.view') || can('products.vi
                                 </Link>
                             </SidebarMenuButton>
                         </SidebarMenuItem>
+                        <SidebarMenuItem v-if="can('raw-materials.view')">
+                            <SidebarMenuButton as-child tooltip="Bahan Baku" :is-active="isRawMaterialsActive">
+                                <Link href="/admin/master/raw-materials">
+                                    <Layers />
+                                    <span>Bahan Baku</span>
+                                </Link>
+                            </SidebarMenuButton>
+                        </SidebarMenuItem>
                     </SidebarMenu>
                 </SidebarGroupContent>
             </SidebarGroup>
diff --git a/resources/js/components/raw-materials/RawMaterialForm.vue b/resources/js/components/raw-materials/RawMaterialForm.vue
new file mode 100644
index 0000000..99297a3
--- /dev/null
+++ b/resources/js/components/raw-materials/RawMaterialForm.vue
@@ -0,0 +1,374 @@
+<script setup lang="ts">
+import { useForm } from '@inertiajs/vue3';
+import { Copy, Plus, Save, Trash2 } from '@lucide/vue';
+import { ref } from 'vue';
+import { toast } from 'vue-sonner';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+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,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from '@/components/ui/select';
+import { parseRupiah } from '@/lib/rupiah';
+import type {
+    EnumOption,
+    RawMaterialFormData,
+    RawMaterialPriceFormItem,
+} from '@/types/raw-material';
+
+const props = withDefaults(
+    defineProps<{
+        units: EnumOption[];
+        initialData?: {
+            name?: string;
+            unit?: string;
+            prices?: Array<{
+                id?: number;
+                variant?: string;
+                price?: string;
+                stock?: string;
+            }>;
+        };
+        submitUrl: string;
+        method?: 'post' | 'put';
+        submitLabel?: string;
+    }>(),
+    {
+        method: 'post',
+        submitLabel: 'Simpan',
+    },
+);
+
+function createClientId(): string {
+    return `price-${crypto.randomUUID()}`;
+}
+
+function createEmptyPrice(): RawMaterialPriceFormItem {
+    return {
+        client_id: createClientId(),
+        variant: '',
+        price: '',
+        stock: '0',
+    };
+}
+
+function buildInitialPrices(): RawMaterialPriceFormItem[] {
+    if (!props.initialData?.prices?.length) {
+        return [createEmptyPrice()];
+    }
+
+    return props.initialData.prices.map((price) => ({
+        client_id: createClientId(),
+        id: price.id,
+        variant: price.variant ?? '',
+        price: price.price ?? '',
+        stock: price.stock ?? '0',
+    }));
+}
+
+const prices = ref<RawMaterialPriceFormItem[]>(buildInitialPrices());
+const useSamePrice = ref(prices.value.length <= 1 || allPricesHaveSameValue(prices.value));
+
+const form = useForm({
+    name: props.initialData?.name ?? '',
+    unit: props.initialData?.unit ?? '',
+});
+
+function allPricesHaveSameValue(items: RawMaterialPriceFormItem[]): boolean {
+    if (items.length <= 1) {
+        return true;
+    }
+
+    const first = items[0].price.trim();
+
+    return items.every((item) => item.price.trim() === first);
+}
+
+function addPrice() {
+    const newPrice = createEmptyPrice();
+
+    if (useSamePrice.value && prices.value[0]) {
+        newPrice.price = prices.value[0].price;
+    }
+
+    prices.value = [...prices.value, newPrice];
+}
+
+function removePrice(clientId: string) {
+    if (prices.value.length <= 1) {
+        return;
+    }
+
+    prices.value = prices.value.filter((price) => price.client_id !== clientId);
+}
+
+function setPriceField(clientId: string, key: 'variant' | 'stock', value: string) {
+    prices.value = prices.value.map((price) =>
+        price.client_id === clientId ? { ...price, [key]: value } : price,
+    );
+}
+
+function setPriceValue(clientId: string, value: string) {
+    prices.value = prices.value.map((price) =>
+        price.client_id === clientId ? { ...price, price: value } : price,
+    );
+}
+
+function setSharedPrice(value: string) {
+    prices.value = prices.value.map((price) => ({ ...price, price: value }));
+}
+
+function toggleUseSamePrice(checked: boolean) {
+    useSamePrice.value = checked;
+
+    if (!checked || !prices.value[0]) {
+        return;
+    }
+
+    const sourcePrice = prices.value[0].price;
+    prices.value = prices.value.map((price) => ({ ...price, price: sourcePrice }));
+}
+
+function applyPriceToAllVariants(sourceClientId: string) {
+    const source = prices.value.find((price) => price.client_id === sourceClientId);
+
+    if (!source) {
+        return;
+    }
+
+    prices.value = prices.value.map((price) => ({ ...price, price: source.price }));
+}
+
+function parseStockValue(value: string): number {
+    const parsed = Number.parseFloat(value.replace(',', '.'));
+
+    return Number.isNaN(parsed) ? 0 : parsed;
+}
+
+function buildSubmitPayload(): RawMaterialFormData {
+    return {
+        name: form.name.trim(),
+        unit: form.unit,
+        prices: prices.value.map((price) => ({
+            ...(price.id ? { id: price.id } : {}),
+            variant: price.variant.trim(),
+            price: Number.parseInt(parseRupiah(price.price), 10) || 0,
+            stock: parseStockValue(price.stock),
+        })),
+    };
+}
+
+function formError(key: string): string | undefined {
+    return (form.errors as Record<string, string>)[key];
+}
+
+function priceError(clientId: string, field: string): string | undefined {
+    const index = prices.value.findIndex((price) => price.client_id === clientId);
+
+    if (index === -1) {
+        return undefined;
+    }
+
+    return formError(`prices.${index}.${field}`);
+}
+
+function submit() {
+    const options = {
+        onError: () => {
+            toast.error('Gagal menyimpan data. Periksa kembali formulir.');
+        },
+    };
+
+    const payload = buildSubmitPayload();
+
+    if (props.method === 'put') {
+        form.transform(() => payload).put(props.submitUrl, options);
+    } else {
+        form.transform(() => payload).post(props.submitUrl, options);
+    }
+}
+</script>
+
+<template>
+    <form @submit.prevent="submit">
+        <div class="grid gap-6">
+            <Card>
+                <CardHeader>
+                    <CardTitle>Informasi Bahan Baku</CardTitle>
+                </CardHeader>
+                <CardContent>
+                    <FieldGroup>
+                        <FieldSet class="grid gap-4 md:grid-cols-2">
+                            <Field>
+                                <FieldLabel for="name" required>Nama Bahan Baku</FieldLabel>
+                                <Input
+                                    id="name"
+                                    v-model="form.name"
+                                    type="text"
+                                    placeholder="Masukkan nama bahan baku"
+                                />
+                                <FieldError :errors="form.errors.name ? [form.errors.name] : []" />
+                            </Field>
+
+                            <Field>
+                                <FieldLabel for="unit" required>Satuan</FieldLabel>
+                                <Select v-model="form.unit">
+                                    <SelectTrigger id="unit" class="w-full">
+                                        <SelectValue placeholder="Pilih satuan" />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                        <SelectItem
+                                            v-for="option in units"
+                                            :key="option.value"
+                                            :value="option.value"
+                                        >
+                                            {{ option.label }}
+                                        </SelectItem>
+                                    </SelectContent>
+                                </Select>
+                                <FieldError :errors="form.errors.unit ? [form.errors.unit] : []" />
+                            </Field>
+                        </FieldSet>
+                    </FieldGroup>
+                </CardContent>
+            </Card>
+
+            <Card v-if="prices.length > 1">
+                <CardHeader>
+                    <CardTitle>Harga Bersama</CardTitle>
+                </CardHeader>
+                <CardContent>
+                    <FieldGroup>
+                        <label class="mb-4 flex cursor-pointer items-center gap-2">
+                            <input
+                                type="checkbox"
+                                class="size-4 rounded border-input"
+                                :checked="useSamePrice"
+                                @change="toggleUseSamePrice(($event.target as HTMLInputElement).checked)"
+                            >
+                            <span class="text-sm">Gunakan harga yang sama untuk semua varian</span>
+                        </label>
+
+                        <Field v-if="useSamePrice && prices[0]">
+                            <FieldLabel :for="`shared_price_${prices[0].client_id}`" required>
+                                Harga
+                            </FieldLabel>
+                            <RupiahInput
+                                :id="`shared_price_${prices[0].client_id}`"
+                                :model-value="prices[0].price"
+                                @update:model-value="setSharedPrice"
+                            />
+                            <FieldError
+                                :errors="priceError(prices[0].client_id, 'price') ? [priceError(prices[0].client_id, 'price')!] : []"
+                            />
+                        </Field>
+                    </FieldGroup>
+                </CardContent>
+            </Card>
+
+            <Card v-for="(price, index) in prices" :key="price.client_id">
+                <CardHeader class="flex flex-row items-start justify-between gap-4">
+                    <CardTitle>Varian {{ index + 1 }}</CardTitle>
+                    <div class="flex items-center gap-2">
+                        <Button
+                            v-if="prices.length > 1 && !useSamePrice"
+                            type="button"
+                            variant="outline"
+                            size="sm"
+                            @click="applyPriceToAllVariants(price.client_id)"
+                        >
+                            <Copy class="size-4" />
+                            Terapkan Harga ke Semua
+                        </Button>
+                        <Button
+                            v-if="prices.length > 1"
+                            type="button"
+                            variant="outline"
+                            size="icon"
+                            class="text-destructive hover:text-destructive size-8"
+                            @click="removePrice(price.client_id)"
+                        >
+                            <Trash2 class="size-4" />
+                        </Button>
+                    </div>
+                </CardHeader>
+                <CardContent>
+                    <FieldGroup>
+                        <FieldSet class="grid gap-4 md:grid-cols-3">
+                            <Field>
+                                <FieldLabel :for="`variant_${price.client_id}`" required>
+                                    Nama Varian
+                                </FieldLabel>
+                                <Input
+                                    :id="`variant_${price.client_id}`"
+                                    :model-value="price.variant"
+                                    type="text"
+                                    placeholder="Contoh: Premium / 40s"
+                                    @update:model-value="setPriceField(price.client_id, 'variant', String($event))"
+                                />
+                                <FieldError
+                                    :errors="priceError(price.client_id, 'variant') ? [priceError(price.client_id, 'variant')!] : []"
+                                />
+                            </Field>
+                            <Field>
+                                <FieldLabel :for="`stock_${price.client_id}`" required>
+                                    Stok
+                                </FieldLabel>
+                                <Input
+                                    :id="`stock_${price.client_id}`"
+                                    :model-value="price.stock"
+                                    type="number"
+                                    min="0"
+                                    step="0.0001"
+                                    @update:model-value="setPriceField(price.client_id, 'stock', String($event))"
+                                />
+                                <FieldError
+                                    :errors="priceError(price.client_id, 'stock') ? [priceError(price.client_id, 'stock')!] : []"
+                                />
+                            </Field>
+                            <Field v-if="!useSamePrice || prices.length === 1">
+                                <FieldLabel :for="`price_${price.client_id}`" required>
+                                    Harga
+                                </FieldLabel>
+                                <RupiahInput
+                                    :id="`price_${price.client_id}`"
+                                    :model-value="price.price"
+                                    @update:model-value="setPriceValue(price.client_id, $event)"
+                                />
+                                <FieldError
+                                    :errors="priceError(price.client_id, 'price') ? [priceError(price.client_id, 'price')!] : []"
+                                />
+                            </Field>
+                        </FieldSet>
+                    </FieldGroup>
+                </CardContent>
+            </Card>
+
+            <FieldError :errors="formError('prices') ? [formError('prices')!] : []" />
+
+            <div class="flex items-center justify-between gap-2">
+                <Button type="button" variant="outline" @click="addPrice">
+                    <Plus class="size-4" />
+                    Tambah Varian
+                </Button>
+
+                <Button type="submit" :disabled="form.processing">
+                    <Save class="size-4" />
+                    {{ form.processing ? 'Menyimpan...' : submitLabel }}
+                </Button>
+            </div>
+        </div>
+    </form>
+</template>
diff --git a/resources/js/components/raw-materials/RawMaterialGroupedTable.vue b/resources/js/components/raw-materials/RawMaterialGroupedTable.vue
new file mode 100644
index 0000000..504180c
--- /dev/null
+++ b/resources/js/components/raw-materials/RawMaterialGroupedTable.vue
@@ -0,0 +1,179 @@
+<script setup lang="ts">
+import { Link } from '@inertiajs/vue3';
+import { computed } from 'vue';
+import DataTableActions from '@/components/raw-materials/data-table-actions.vue';
+import RawMaterialStatusToggle from '@/components/raw-materials/raw-material-status-toggle.vue';
+import DataTableToolbar from '@/components/data-table/DataTableToolbar.vue';
+import { Badge } from '@/components/ui/badge';
+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 { groupRawMaterialRows } from '@/lib/raw-materials';
+import type {
+    DataTableFilterDef,
+    DataTablePagination,
+    DataTablePaginationLink,
+} from '@/types/data-table';
+import type { RawMaterialTableRow } from '@/types/raw-material';
+
+const props = defineProps<{
+    rows: RawMaterialTableRow[];
+    pagination?: DataTablePagination;
+    paginationLinks?: DataTablePaginationLink[];
+    paginationDisplayedCount?: number;
+    filterDefs?: DataTableFilterDef[];
+    filterValues?: Record<string, string>;
+}>();
+
+const search = defineModel<string>('search', { default: '' });
+
+const emit = defineEmits<{
+    'filter-change': [key: string, value: string];
+    'filters-reset': [];
+}>();
+
+const materialGroups = computed(() => groupRawMaterialRows(props.rows));
+
+const showingCount = computed(() => props.paginationDisplayedCount ?? materialGroups.value.length);
+
+const paginationSummary = computed(() => {
+    if (!props.pagination) {
+        return null;
+    }
+
+    const { total } = props.pagination;
+
+    if (total === 0) {
+        return 'Menampilkan 0 bahan baku';
+    }
+
+    return `Menampilkan ${showingCount.value} bahan baku dari ${total}`;
+});
+
+function groupHeaderRow(group: ReturnType<typeof groupRawMaterialRows>[number]): RawMaterialTableRow {
+    return group.variants[0];
+}
+</script>
+
+<template>
+    <div class="space-y-4">
+        <DataTableToolbar
+            v-model:search="search"
+            :filter-defs="filterDefs"
+            :filter-values="filterValues"
+            @filter-change="(key, value) => emit('filter-change', key, value)"
+            @filters-reset="emit('filters-reset')"
+        />
+
+        <div v-if="materialGroups.length" class="space-y-4">
+            <div
+                v-for="group in materialGroups"
+                :key="group.raw_material_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">
+                            {{ group.raw_material_row_number }}
+                        </span>
+                        <div class="min-w-0 space-y-2">
+                            <div class="flex flex-wrap items-center gap-2">
+                                <h3 class="font-medium leading-tight">
+                                    {{ group.raw_material_name }}
+                                </h3>
+                                <Badge variant="secondary">
+                                    {{ group.unit_label }}
+                                </Badge>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="flex shrink-0 items-center justify-end gap-2 sm:pt-0.5">
+                        <RawMaterialStatusToggle :row="groupHeaderRow(group)" />
+                        <DataTableActions :row="groupHeaderRow(group)" />
+                    </div>
+                </div>
+
+                <Table>
+                    <TableHeader>
+                        <TableRow>
+                            <TableHead>Varian</TableHead>
+                            <TableHead>Stok</TableHead>
+                            <TableHead>Harga</TableHead>
+                        </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                        <TableRow
+                            v-for="variant in group.variants"
+                            :key="variant.row_id"
+                        >
+                            <TableCell class="font-medium">
+                                {{ variant.variant ?? '-' }}
+                            </TableCell>
+                            <TableCell class="tabular-nums">
+                                {{ variant.stock_formatted ?? '-' }}
+                            </TableCell>
+                            <TableCell class="tabular-nums">
+                                {{ variant.price_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 atau filter 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/raw-materials/data-table-actions.vue b/resources/js/components/raw-materials/data-table-actions.vue
new file mode 100644
index 0000000..0a1d455
--- /dev/null
+++ b/resources/js/components/raw-materials/data-table-actions.vue
@@ -0,0 +1,79 @@
+<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 { RawMaterialTableRow } from '@/types/raw-material';
+
+const props = defineProps<{
+    row: RawMaterialTableRow;
+}>();
+
+const { can } = useCan();
+
+const deleteConfirmOpen = ref(false);
+const deleteProcessing = ref(false);
+
+function destroyRawMaterial() {
+    deleteProcessing.value = true;
+
+    router.delete(`/admin/master/raw-materials/${props.row.raw_material_id}`, {
+        onSuccess: () => {
+            deleteConfirmOpen.value = false;
+        },
+        onError: () => {
+            toast.error('Gagal menghapus bahan baku.');
+        },
+        onFinish: () => {
+            deleteProcessing.value = false;
+        },
+    });
+}
+</script>
+
+<template>
+    <div class="flex items-center justify-end gap-1">
+        <Tooltip v-if="can('raw-materials.update')">
+            <TooltipTrigger as-child>
+                <Button variant="ghost" size="icon" class="size-8" as-child>
+                    <Link :href="`/admin/master/raw-materials/${row.raw_material_id}/edit`">
+                        <Pencil class="size-4" />
+                        <span class="sr-only">Ubah</span>
+                    </Link>
+                </Button>
+            </TooltipTrigger>
+            <TooltipContent>Ubah</TooltipContent>
+        </Tooltip>
+
+        <Tooltip v-if="can('raw-materials.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('raw-materials.delete')"
+        v-model:open="deleteConfirmOpen"
+        title="Hapus bahan baku?"
+        :description="`Bahan baku ${row.raw_material_name} akan dihapus beserta seluruh variannya. Tindakan ini tidak dapat dibatalkan.`"
+        confirm-label="Hapus"
+        cancel-label="Batal"
+        destructive
+        :loading="deleteProcessing"
+        @confirm="destroyRawMaterial"
+    />
+</template>
diff --git a/resources/js/components/raw-materials/raw-material-status-toggle.vue b/resources/js/components/raw-materials/raw-material-status-toggle.vue
new file mode 100644
index 0000000..b097dd6
--- /dev/null
+++ b/resources/js/components/raw-materials/raw-material-status-toggle.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { router } from '@inertiajs/vue3';
+import { ref, watch } from 'vue';
+import { toast } from 'vue-sonner';
+import { Badge } from '@/components/ui/badge';
+import { Switch } from '@/components/ui/switch';
+import { useCan } from '@/composables/useCan';
+import type { RawMaterialTableRow } from '@/types/raw-material';
+
+const props = defineProps<{
+    row: RawMaterialTableRow;
+}>();
+
+const { can } = useCan();
+
+const isActive = ref(props.row.is_active);
+const processing = ref(false);
+
+watch(
+    () => props.row.is_active,
+    (value) => {
+        isActive.value = value;
+    },
+);
+
+function toggleStatus(checked: boolean) {
+    if (!can('raw-materials.toggle-status')) {
+        return;
+    }
+
+    const previous = isActive.value;
+    isActive.value = checked;
+    processing.value = true;
+
+    router.patch(`/admin/master/raw-materials/${props.row.raw_material_id}/toggle-status`, {
+        is_active: checked,
+    }, {
+        preserveScroll: true,
+        onError: () => {
+            isActive.value = previous;
+            toast.error('Gagal memperbarui status bahan baku.');
+        },
+        onFinish: () => {
+            processing.value = false;
+        },
+    });
+}
+</script>
+
+<template>
+    <div class="flex items-center gap-2">
+        <Switch
+            :model-value="isActive"
+            :disabled="processing || !can('raw-materials.toggle-status')"
+            @update:model-value="toggleStatus"
+        />
+        <Badge :variant="isActive ? 'default' : 'secondary'">
+            {{ isActive ? 'Aktif' : 'Nonaktif' }}
+        </Badge>
+    </div>
+</template>
diff --git a/resources/js/lib/raw-materials.ts b/resources/js/lib/raw-materials.ts
new file mode 100644
index 0000000..804974d
--- /dev/null
+++ b/resources/js/lib/raw-materials.ts
@@ -0,0 +1,30 @@
+import type { RawMaterialTableGroup, RawMaterialTableRow } from '@/types/raw-material';
+
+export function groupRawMaterialRows(rows: RawMaterialTableRow[]): RawMaterialTableGroup[] {
+    const groups: RawMaterialTableGroup[] = [];
+    const indexByMaterialId = new Map<number, number>();
+
+    for (const row of rows) {
+        const existingIndex = indexByMaterialId.get(row.raw_material_id);
+
+        if (existingIndex === undefined) {
+            indexByMaterialId.set(row.raw_material_id, groups.length);
+            groups.push({
+                raw_material_id: row.raw_material_id,
+                raw_material_row_number: row.raw_material_row_number,
+                raw_material_name: row.raw_material_name,
+                unit: row.unit,
+                unit_label: row.unit_label,
+                unit_abbreviation: row.unit_abbreviation,
+                is_active: row.is_active,
+                variants: [row],
+            });
+
+            continue;
+        }
+
+        groups[existingIndex].variants.push(row);
+    }
+
+    return groups;
+}
diff --git a/resources/js/pages/admin/raw-materials/Create.vue b/resources/js/pages/admin/raw-materials/Create.vue
new file mode 100644
index 0000000..2a76400
--- /dev/null
+++ b/resources/js/pages/admin/raw-materials/Create.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { Head, Link } from '@inertiajs/vue3';
+import { ArrowLeft } from '@lucide/vue';
+import RawMaterialForm from '@/components/raw-materials/RawMaterialForm.vue';
+import { Button } from '@/components/ui/button';
+import AdminLayout from '@/layouts/AdminLayout.vue';
+import type { EnumOption } from '@/types/raw-material';
+
+defineProps<{
+    units: EnumOption[];
+}>();
+</script>
+
+<template>
+
+    <Head title="Tambah Bahan Baku" />
+
+    <AdminLayout title="Tambah Bahan Baku">
+        <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 Bahan Baku
+                </h2>
+            </div>
+
+            <Button variant="outline" as-child class="shrink-0 self-start sm:self-center">
+                <Link href="/admin/master/raw-materials">
+                    <ArrowLeft class="size-4" />
+                    Kembali
+                </Link>
+            </Button>
+        </div>
+
+        <RawMaterialForm
+            submit-url="/admin/master/raw-materials"
+            method="post"
+            submit-label="Simpan"
+            :units="units"
+        />
+    </AdminLayout>
+</template>
diff --git a/resources/js/pages/admin/raw-materials/Edit.vue b/resources/js/pages/admin/raw-materials/Edit.vue
new file mode 100644
index 0000000..37712fb
--- /dev/null
+++ b/resources/js/pages/admin/raw-materials/Edit.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { Head, Link } from '@inertiajs/vue3';
+import { ArrowLeft } from '@lucide/vue';
+import { computed } from 'vue';
+import RawMaterialForm from '@/components/raw-materials/RawMaterialForm.vue';
+import { Button } from '@/components/ui/button';
+import AdminLayout from '@/layouts/AdminLayout.vue';
+import type { EnumOption, RawMaterialEditItem } from '@/types/raw-material';
+
+const props = defineProps<{
+    rawMaterial: RawMaterialEditItem;
+    units: EnumOption[];
+}>();
+
+const initialData = computed(() => ({
+    name: props.rawMaterial.name ?? '',
+    unit: props.rawMaterial.unit ?? '',
+    prices: props.rawMaterial.prices ?? [],
+}));
+</script>
+
+<template>
+
+    <Head title="Ubah Bahan Baku" />
+
+    <AdminLayout title="Ubah Bahan Baku">
+        <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 Bahan Baku
+                </h2>
+            </div>
+
+            <Button variant="outline" as-child class="shrink-0 self-start sm:self-center">
+                <Link href="/admin/master/raw-materials">
+                    <ArrowLeft class="size-4" />
+                    Kembali
+                </Link>
+            </Button>
+        </div>
+
+        <RawMaterialForm
+            :submit-url="`/admin/master/raw-materials/${rawMaterial.id}`"
+            method="put"
+            submit-label="Perbarui"
+            :initial-data="initialData"
+            :units="units"
+        />
+    </AdminLayout>
+</template>
diff --git a/resources/js/pages/admin/raw-materials/Index.vue b/resources/js/pages/admin/raw-materials/Index.vue
new file mode 100644
index 0000000..4c43904
--- /dev/null
+++ b/resources/js/pages/admin/raw-materials/Index.vue
@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import { Head, Link } from '@inertiajs/vue3';
+import { Plus } from '@lucide/vue';
+import { computed, ref, watch } from 'vue';
+import RawMaterialGroupedTable from '@/components/raw-materials/RawMaterialGroupedTable.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 { DataTableFilterDef } from '@/types/data-table';
+import type { RawMaterialPagination, RawMaterialTableRow } from '@/types/raw-material';
+
+const props = defineProps<{
+    rows: RawMaterialTableRow[];
+    pagination: RawMaterialPagination;
+    filters: {
+        search: string;
+        sort?: string;
+        direction?: 'asc' | 'desc';
+        is_active?: string;
+    };
+}>();
+
+const { can } = useCan();
+const search = ref(props.filters.search ?? '');
+
+const { query, setSearch, setFilter, resetFilters, syncFromServer } = useDataTableQuery({
+    url: '/admin/master/raw-materials',
+    initial: { ...props.filters },
+    filterKeys: ['is_active'],
+});
+
+useDataTableQuerySync(() => props.filters, syncFromServer);
+
+const filterDefs = computed<DataTableFilterDef[]>(() => [
+    {
+        key: 'is_active',
+        label: 'Status',
+        type: 'select',
+        options: [
+            { value: '1', label: 'Aktif' },
+            { value: '0', label: 'Nonaktif' },
+        ],
+    },
+]);
+
+const filterValues = computed(() => ({
+    is_active: query.value.is_active ?? '',
+}));
+
+const tablePagination = computed(() => ({
+    currentPage: props.pagination.current_page,
+    perPage: props.pagination.per_page,
+    lastPage: props.pagination.last_page,
+    total: props.pagination.total,
+}));
+
+const materialCountOnPage = computed(() => (
+    new Set(props.rows.map((row) => row.raw_material_id)).size
+));
+
+watch(search, (value) => {
+    setSearch(value);
+});
+
+watch(
+    () => props.filters.search,
+    (value) => {
+        search.value = value ?? '';
+    },
+);
+</script>
+
+<template>
+
+    <Head title="Bahan Baku" />
+
+    <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">
+                    Bahan Baku
+                </h2>
+            </div>
+
+            <Button v-if="can('raw-materials.create')" as-child class="shrink-0 self-start sm:self-center">
+                <Link href="/admin/master/raw-materials/create">
+                    <Plus class="size-4" />
+                    Tambah
+                </Link>
+            </Button>
+        </div>
+
+        <Card class="min-w-0">
+            <CardContent class="min-w-0">
+                <RawMaterialGroupedTable
+                    v-model:search="search"
+                    :rows="rows"
+                    :pagination="tablePagination"
+                    :pagination-links="pagination.links"
+                    :pagination-displayed-count="materialCountOnPage"
+                    :filter-defs="filterDefs"
+                    :filter-values="filterValues"
+                    @filter-change="setFilter"
+                    @filters-reset="resetFilters"
+                />
+            </CardContent>
+        </Card>
+    </AdminLayout>
+</template>
diff --git a/resources/js/types/raw-material.ts b/resources/js/types/raw-material.ts
new file mode 100644
index 0000000..84191b7
--- /dev/null
+++ b/resources/js/types/raw-material.ts
@@ -0,0 +1,77 @@
+export type EnumOption = {
+    value: string;
+    label: string;
+};
+
+export type RawMaterialTableGroup = {
+    raw_material_id: number;
+    raw_material_row_number: number;
+    raw_material_name: string;
+    unit: string;
+    unit_label: string;
+    unit_abbreviation: string;
+    is_active: boolean;
+    variants: RawMaterialTableRow[];
+};
+
+export type RawMaterialTableRow = {
+    row_id: string;
+    raw_material_id: number;
+    raw_material_name: string;
+    unit: string;
+    unit_label: string;
+    unit_abbreviation: string;
+    is_active: boolean;
+    is_first_variant: boolean;
+    variant_count: number;
+    raw_material_row_number: number;
+    price_id: number | null;
+    variant: string | null;
+    stock: string | null;
+    stock_formatted: string | null;
+    price: string | null;
+    price_formatted: string | null;
+};
+
+export type RawMaterialPriceFormItem = {
+    client_id: string;
+    id?: number;
+    variant: string;
+    price: string;
+    stock: string;
+};
+
+export type RawMaterialEditItem = {
+    id: number;
+    name: string;
+    unit: string;
+    prices: Array<{
+        id: number;
+        variant: string;
+        price: string;
+        stock: string;
+    }>;
+};
+
+export type RawMaterialFormData = {
+    name: string;
+    unit: string;
+    prices: Array<{
+        id?: number;
+        variant: string;
+        price: number;
+        stock: number;
+    }>;
+};
+
+export type RawMaterialPagination = {
+    current_page: number;
+    last_page: number;
+    per_page: number;
+    total: number;
+    links: Array<{
+        url: string | null;
+        label: string;
+        active: boolean;
+    }>;
+};
diff --git a/routes/web.php b/routes/web.php
index 8c40195..c6a5ed1 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -5,6 +5,7 @@
 use App\Http\Controllers\Admin\DashboardController;
 use App\Http\Controllers\Admin\Hr\EmployeeController;
 use App\Http\Controllers\Admin\ProductController;
+use App\Http\Controllers\Admin\RawMaterialController;
 use App\Http\Controllers\Auth\LoginController;
 use App\Http\Controllers\Auth\LogoutController;
 use Illuminate\Support\Facades\Route;
@@ -71,6 +72,36 @@
 
                     Route::get('/', [ProductController::class, 'index'])->name('index');
                 });
+
+            Route::prefix('raw-materials')->name('raw-materials.')
+                ->middleware('permission:'.Permission::RAW_MATERIALS_VIEW->value)
+                ->group(function () {
+                    Route::get('create', [RawMaterialController::class, 'create'])
+                        ->middleware('permission:'.Permission::RAW_MATERIALS_CREATE->value)
+                        ->name('create');
+
+                    Route::post('/', [RawMaterialController::class, 'store'])
+                        ->middleware('permission:'.Permission::RAW_MATERIALS_CREATE->value)
+                        ->name('store');
+
+                    Route::get('{rawMaterial}/edit', [RawMaterialController::class, 'edit'])
+                        ->middleware('permission:'.Permission::RAW_MATERIALS_UPDATE->value)
+                        ->name('edit');
+
+                    Route::put('{rawMaterial}', [RawMaterialController::class, 'update'])
+                        ->middleware('permission:'.Permission::RAW_MATERIALS_UPDATE->value)
+                        ->name('update');
+
+                    Route::patch('{rawMaterial}/toggle-status', [RawMaterialController::class, 'toggleStatus'])
+                        ->middleware('permission:'.Permission::RAW_MATERIALS_TOGGLE_STATUS->value)
+                        ->name('toggle-status');
+
+                    Route::delete('{rawMaterial}', [RawMaterialController::class, 'destroy'])
+                        ->middleware('permission:'.Permission::RAW_MATERIALS_DELETE->value)
+                        ->name('destroy');
+
+                    Route::get('/', [RawMaterialController::class, 'index'])->name('index');
+                });
         });
 
         Route::prefix('hr')->name('hr.')->middleware('permission:'.Permission::EMPLOYEES_VIEW->value)->group(function () {