diff --git a/app/Http/Controllers/HukumController.php b/app/Http/Controllers/HukumController.php
index a2a200d..2103a25 100644
--- a/app/Http/Controllers/HukumController.php
+++ b/app/Http/Controllers/HukumController.php
@@ -2,8 +2,15 @@
 
 namespace App\Http\Controllers;
 
+use App\Http\Requests\HukumRequest;
+use App\Models\Hukum;
+use App\Models\JenisSanksi;
+use App\Models\Penaatan;
+use App\Models\Perusahaan;
 use Illuminate\Http\Request;
+use Illuminate\Support\Facades\DB;
 use Illuminate\Support\Facades\Log;
+use Illuminate\Support\Facades\Storage;
 use Inertia\Inertia;
 
 class HukumController extends Controller
@@ -11,10 +18,116 @@ class HukumController extends Controller
     public function index()
     {
         try {
-            return Inertia::render('admin/hukum/index_hukum');
+            $hukumData = Hukum::with(['perusahaan', 'jenisSanksi', 'penaatan'])->orderBy('created_at', 'desc')->get();
+            return Inertia::render('admin/hukum/index_hukum', [
+                'hukumData' => $hukumData,
+                'perusahaan' => Perusahaan::all(),
+                'jenisSanksi' => JenisSanksi::all(),
+                'penaatan' => Penaatan::all(),
+            ]);
         } catch (\Exception $e) {
-            Log::error('Error rendering view: ' . $e->getMessage());
-            return back()->with('error', 'Something went wrong.');
+            Log::error('Error fetching data: ' . $e->getMessage());
+            return back()->with('error', 'Terjadi kesalahan saat memuat data.');
         }
     }
+
+
+    public function store(HukumRequest $request)
+    {
+    try {
+        DB::beginTransaction();
+
+        $data = $request->validated();
+
+        if ($request->hasFile('SanksiFile')) {
+            $fileName = time() . '_' . $request->file('SanksiFile')->getClientOriginalName();
+            $path = $request->file('SanksiFile')->storeAs('files/hukum/sanksi', $fileName, 'public');
+            $data['SanksiFile'] = $path;
+        }
+
+        if ($request->hasFile('PenaatanFile')) {
+            $fileName = time() . '_' . $request->file('PenaatanFile')->getClientOriginalName();
+            $path = $request->file('PenaatanFile')->storeAs('files/hukum/penaatan', $fileName, 'public');
+            $data['PenaatanFile'] = $path;
+        }
+
+        Hukum::create($data);
+
+        DB::commit();
+
+        return redirect()->route('admin.hukum.index')->with('success', 'Status Hukum berhasil ditambahkan');
+    } catch (\Exception $e) {
+        DB::rollBack();
+        Log::error('Error creating hukum: ' . $e->getMessage());
+        return response()->json(['message' => 'Error: ' . $e->getMessage()], 500);
+    }
+    }
+
+    public function update(HukumRequest $request, Hukum $hukum)
+    {
+        try {
+            DB::beginTransaction();
+
+            $data = $request->validated();
+
+            if ($request->hasFile('SanksiFile')) {
+                // Delete old file if exists
+                if ($hukum->SanksiFile && Storage::disk('public')->exists($hukum->SanksiFile)) {
+                    Storage::disk('public')->delete($hukum->SanksiFile);
+                }
+
+                $fileName = time() . '_' . $request->file('SanksiFile')->getClientOriginalName();
+                $path = $request->file('SanksiFile')->storeAs('files/hukum/sanksi', $fileName, 'public');
+                $data['SanksiFile'] = $path;
+            }
+
+            if ($request->hasFile('PenaatanFile')) {
+                // Delete old file if exists
+                if ($hukum->PenaatanFile && Storage::disk('public')->exists($hukum->PenaatanFile)) {
+                    Storage::disk('public')->delete($hukum->PenaatanFile);
+                }
+
+                $fileName = time() . '_' . $request->file('PenaatanFile')->getClientOriginalName();
+                $path = $request->file('PenaatanFile')->storeAs('files/hukum/penaatan', $fileName, 'public');
+                $data['PenaatanFile'] = $path;
+            }
+
+            $hukum->update($data);
+
+            DB::commit();
+
+            return redirect()->route('admin.hukum.index')->with('success', 'Status Hukum berhasil diperbarui');
+        } catch (\Exception $e) {
+            DB::rollBack();
+            Log::error('Error updating hukum: ' . $e->getMessage());
+            return response()->json(['message' => 'Error: ' . $e->getMessage()], 500);
+        }
+    }
+
+    public function destroy(Hukum $hukum)
+    {
+        try {
+            DB::beginTransaction();
+
+            // Delete file if exists
+            if ($hukum->SanksiFile && Storage::disk('public')->exists($hukum->SanksiFile)) {
+                Storage::disk('public')->delete($hukum->SanksiFile);
+            }
+
+            if ($hukum->PenaatanFile && Storage::disk('public')->exists($hukum->PenaatanFile)) {
+                Storage::disk('public')->delete($hukum->PenaatanFile);
+            }
+
+            $hukum->delete();
+
+            DB::commit();
+
+            return redirect()->route('admin.hukum.index')->with('success', 'Status Hukum berhasil dihapus');
+        } catch (\Exception $e) {
+            DB::rollBack();
+            Log::error('Error deleting hukum: ' . $e->getMessage());
+            return response()->json(['message' => 'Error: ' . $e->getMessage()], 500);
+        }
+    }
+
 }
diff --git a/app/Http/Requests/HukumRequest.php b/app/Http/Requests/HukumRequest.php
index 4f351d2..868b2b8 100644
--- a/app/Http/Requests/HukumRequest.php
+++ b/app/Http/Requests/HukumRequest.php
@@ -22,12 +22,12 @@ class HukumRequest extends FormRequest
     public function rules(): array
     {
         return [
-           'PerusahaanId'    => 'nullable|integer|exists:RefPerusahaan,id',
-            'JenisSanksiId'   => 'nullable|integer|exists:RefJenisSanksi,id',
+           'PerusahaanId'    => 'nullable|integer',
+            'JenisSanksiId'   => 'nullable|integer',
             'SanksiNumber'    => 'nullable|string|max:100',
             'SanksiDate'      => 'nullable|date',
             'SanksiFile'      => 'nullable|file|mimes:pdf|max:2048',
-            'StatusPenaatan'  => 'required|integer|in:1,2,3',
+            'PenaatanId'  => 'required|integer|in:1,2,3',
             'PenaatanNumber'  => 'nullable|string|max:100',
             'PenaatanDate'    => 'nullable|date',
             'PenaatanFile'    => 'nullable|file|mimes:pdf,jpg,png|max:2048',
@@ -46,8 +46,8 @@ class HukumRequest extends FormRequest
             'SanksiDate.date'        => 'Tanggal SK Sanksi harus berupa format tanggal.',
             'SanksiFile.mimes'       => 'File Sanksi harus berupa PDF',
             'SanksiFile.max'         => 'Ukuran file maksimal 2MB.',
-            'StatusPenaatan.required'=> 'Status Penaatan wajib diisi.',
-            'StatusPenaatan.in'      => 'Status Penaatan hanya boleh 1, 2, atau 3.',
+            'PenaatanId.required'=> 'Status Penaatan wajib diisi.',
+            'PenaatanId.in'      => 'Status Penaatan hanya boleh 1, 2, atau 3.',
             'PenaatanNumber.max'     => 'Nomor SK Penaatan maksimal 100 karakter.',
             'PenaatanDate.date'      => 'Tanggal SK Penaatan harus berupa format tanggal.',
             'PenaatanFile.mimes'     => 'File Penaatan harus berupa PDF',
diff --git a/app/Models/Hukum.php b/app/Models/Hukum.php
index bda379f..6985c8c 100644
--- a/app/Models/Hukum.php
+++ b/app/Models/Hukum.php
@@ -10,6 +10,7 @@ class Hukum extends Model
     use HasFactory;
 
     protected $table = 'Hukum';
+    protected $primaryKey = 'HukumId';
 
     protected $fillable = [
         'PerusahaanId',
@@ -17,23 +18,26 @@ class Hukum extends Model
         'SanksiNumber',
         'SanksiDate',
         'SanksiFile',
-        'StatusPenaatan',
+        'PenaatanId',
         'PenaatanNumber',
         'PenaatanDate',
         'PenaatanFile',
-        'IsDeleted',
     ];
 
+    public $timestamps = true;
+
     public function perusahaan()
     {
         return $this->belongsTo(Perusahaan::class, 'PerusahaanId');
     }
 
-    /**
-     * Relasi ke tabel jenis sanksi.
-     */
     public function jenisSanksi()
     {
         return $this->belongsTo(JenisSanksi::class, 'JenisSanksiId');
     }
+
+    public function penaatan()
+    {
+        return $this->belongsTo(Penaatan::class, 'PenaatanId');
+    }
 }
diff --git a/database/migrations/2025_02_27_140639_remove__status_penaatan_add__penaatan_id.php b/database/migrations/2025_02_27_140639_remove__status_penaatan_add__penaatan_id.php
new file mode 100644
index 0000000..f684651
--- /dev/null
+++ b/database/migrations/2025_02_27_140639_remove__status_penaatan_add__penaatan_id.php
@@ -0,0 +1,42 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('Hukum', function (Blueprint $table) {
+            // Remove the StatusPenaatan column
+            $table->dropColumn('StatusPenaatan');
+
+            // Add PenaatanId column as foreign key
+            $table->unsignedInteger('PenaatanId')->nullable()->comment('id dari tabel Penaatan untuk mengambil NamaPenaatan');
+            $table->foreign('PenaatanId')->references('PenaatanId')->on('Penaatan')->onDelete('set null');
+
+            // Add index for the new column
+            $table->index('PenaatanId');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('Hukum', function (Blueprint $table) {
+            // Remove the foreign key constraint and the PenaatanId column
+            $table->dropForeign(['PenaatanId']);
+            $table->dropIndex(['PenaatanId']);
+            $table->dropColumn('PenaatanId');
+
+            // Add back the StatusPenaatan column with its original properties
+            $table->unsignedTinyInteger('StatusPenaatan')->default(1)->comment('1=pengawasan, 2=peningkatan sanksi, 3=taat');
+        });
+    }
+};
diff --git a/database/migrations/xxxx_xx_xx_create_hukum_table.php b/database/migrations/xxxx_xx_xx_create_hukum_table.php
new file mode 100644
index 0000000..e69de29
diff --git a/resources/js/components/modals/add-sanksi-hukum.tsx b/resources/js/components/modals/add-sanksi-hukum.tsx
new file mode 100644
index 0000000..db2d504
--- /dev/null
+++ b/resources/js/components/modals/add-sanksi-hukum.tsx
@@ -0,0 +1,277 @@
+import { Button } from "@/components/ui/button";
+import {
+    Dialog,
+    DialogContent,
+    DialogHeader,
+    DialogTitle,
+    DialogFooter,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import Select from "react-select";
+import { useState, useEffect } from "react";
+import { useForm } from "@inertiajs/react";
+import { useToast } from "@/hooks/use-toast";
+
+import { HukumType } from "@/types/perusahaan";
+
+interface AddHukumModalProps {
+    open: boolean;
+    onClose: () => void;
+    onSuccess: () => void;
+    hukumtype: HukumType[];
+    perusahaan: { PerusahaanId: number; NamaPerusahaan: string }[];
+    jenisSanksi: { JenisSanksiId: number; NamaJenisSanksi: string }[];
+    penaatan: { PenaatanId: number; NamaPenaatan: string }[];
+    editingData?: HukumType | null;
+}
+
+export function AddHukumModal({
+    open,
+    onClose,
+    onSuccess,
+    hukumtype,
+    perusahaan,
+    jenisSanksi,
+    penaatan,
+    editingData,
+}: AddHukumModalProps) {
+    const { toast } = useToast();
+    const [loading, setLoading] = useState(false);
+
+    const { data, setData, post, reset } = useForm<{
+        PerusahaanId: string;
+        JenisSanksiId: string;
+        SanksiNumber: string;
+        SanksiDate: string;
+        SanksiFile: File | null;
+        PenaatanId: string;
+        PenaatanNumber: string;
+        PenaatanDate: string;
+        PenaatanFile: File | null;
+        currentSanksiFile?: string;
+        currentPenaatanFile?: string;
+    }>({
+        PerusahaanId: editingData?.PerusahaanId?.toString() || "",
+        JenisSanksiId: editingData?.JenisSanksiId?.toString() || "",
+        SanksiNumber: editingData?.SanksiNumber || "",
+        SanksiDate: editingData?.SanksiDate || "",
+        SanksiFile: null,
+        currentSanksiFile: editingData?.SanksiFile,
+        PenaatanId: editingData?.PenaatanId?.toString() || "",
+        PenaatanNumber: editingData?.PenaatanNumber || "",
+        PenaatanDate: editingData?.PenaatanDate || "",
+        PenaatanFile: null,
+        currentPenaatanFile: editingData?.PenaatanFile,
+    });
+
+    useEffect(() => {
+        if (editingData) {
+            setData({
+                PerusahaanId: editingData.PerusahaanId?.toString() || "",
+                JenisSanksiId: editingData.JenisSanksiId?.toString() || "",
+                SanksiNumber: editingData.SanksiNumber,
+                SanksiDate: editingData.SanksiDate,
+                SanksiFile: null,
+                currentSanksiFile: editingData.SanksiFile,
+                PenaatanId: editingData.PenaatanId?.toString() || "",
+                PenaatanNumber: "",
+                PenaatanDate: "",
+                PenaatanFile: null,
+                currentPenaatanFile: "",
+            });
+        } else {
+            reset();
+        }
+    }, [editingData, open]);
+
+    const perusahaanOptions = perusahaan.map((p) => ({
+        value: p.PerusahaanId.toString(),
+        label: p.NamaPerusahaan,
+    }));
+
+    const jenisSanksiOptions = jenisSanksi.map((j) => ({
+        value: j.JenisSanksiId.toString(),
+        label: j.NamaJenisSanksi,
+    }));
+
+    const penaatanOptions = penaatan.map((j) => ({
+        value: j.PenaatanId.toString(),
+        label: j.NamaPenaatan,
+    }));
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        setLoading(true);
+
+        const formData = new FormData();
+        formData.append("PerusahaanId", data.PerusahaanId);
+        formData.append("JenisSanksiId", data.JenisSanksiId);
+        formData.append("SanksiNumber", data.SanksiNumber);
+        formData.append("SanksiDate", data.SanksiDate);
+        if (data.SanksiFile) formData.append("SanksiFile", data.SanksiFile);
+
+        // Use the selected PenaatanId (no default fallback)
+        formData.append("PenaatanId", data.PenaatanId);
+
+        // Only include these fields if they have values
+        if (data.PenaatanNumber)
+            formData.append("PenaatanNumber", data.PenaatanNumber);
+        if (data.PenaatanDate)
+            formData.append("PenaatanDate", data.PenaatanDate);
+        if (data.PenaatanFile)
+            formData.append("PenaatanFile", data.PenaatanFile);
+
+        const url = editingData
+            ? `/admin/hukum/${editingData.HukumId}`
+            : "/admin/hukum";
+        const method = editingData ? post : post;
+
+        method(url, {
+            data: formData,
+            forceFormData: true,
+            onSuccess: () => {
+                toast({
+                    title: "Berhasil",
+                    description: editingData
+                        ? "Data berhasil diperbarui"
+                        : "Data berhasil ditambahkan",
+                    variant: "default",
+                });
+                reset();
+                setLoading(false);
+                onSuccess();
+                onClose();
+            },
+            onError: () => {
+                toast({
+                    title: "Gagal",
+                    description: "Terjadi kesalahan saat menyimpan data",
+                    variant: "destructive",
+                });
+                setLoading(false);
+            },
+        });
+    };
+
+    return (
+        <Dialog open={open} onOpenChange={onClose}>
+            <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
+                <DialogHeader>
+                    <DialogTitle>
+                        {editingData ? "Edit" : "Tambah"} Sanksi Administratif
+                    </DialogTitle>
+                </DialogHeader>
+                <form onSubmit={handleSubmit} className="space-y-6">
+                    <div className="space-y-4">
+                        <Label>Nama Perusahaan</Label>
+                        <Select
+                            id="PerusahaanId"
+                            options={perusahaanOptions}
+                            placeholder="Pilih Perusahaan"
+                            value={perusahaanOptions.find(
+                                (p) => p.value === data.PerusahaanId
+                            )}
+                            onChange={(option) =>
+                                setData("PerusahaanId", option?.value || "")
+                            }
+                        />
+
+                        <Label>Jenis Sanksi</Label>
+                        <Select
+                            id="JenisSanksiId"
+                            options={jenisSanksiOptions}
+                            placeholder="Pilih Jenis Sanksi"
+                            value={jenisSanksiOptions.find(
+                                (j) => j.value === data.JenisSanksiId
+                            )}
+                            onChange={(option) =>
+                                setData("JenisSanksiId", option?.value || "")
+                            }
+                        />
+
+                        <Label>Nomor SK Sanksi</Label>
+                        <Input
+                            value={data.SanksiNumber}
+                            onChange={(e) =>
+                                setData("SanksiNumber", e.target.value)
+                            }
+                        />
+
+                        <Label>Tanggal SK Sanksi</Label>
+                        <Input
+                            type="date"
+                            value={data.SanksiDate}
+                            onChange={(e) =>
+                                setData("SanksiDate", e.target.value)
+                            }
+                        />
+
+                        <Label>Dokumen SK Sanksi</Label>
+                        <div className="flex flex-col gap-2">
+                            <Input
+                                type="file"
+                                onChange={(e) =>
+                                    setData(
+                                        "SanksiFile",
+                                        e.target.files
+                                            ? e.target.files[0]
+                                            : null
+                                    )
+                                }
+                            />
+                            {editingData?.SanksiFile && (
+                                <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                                    <span>
+                                        File saat ini: {editingData.SanksiFile}
+                                    </span>
+                                    <Button
+                                        type="button"
+                                        variant="outline"
+                                        size="sm"
+                                        onClick={() =>
+                                            window.open(
+                                                `/storage/${editingData.SanksiFile}`,
+                                                "_blank"
+                                            )
+                                        }
+                                    >
+                                        Lihat File
+                                    </Button>
+                                </div>
+                            )}
+                        </div>
+
+                        <Label>Status Penaatan</Label>
+                        <Select
+                            id="PenaatanId"
+                            options={penaatanOptions}
+                            placeholder="Pilih Status Penaatan"
+                            value={penaatanOptions.find(
+                                (p) => p.value === data.PenaatanId
+                            )}
+                            onChange={(option) => {
+                                setData("PenaatanId", option?.value || "");
+                            }}
+                            isDisabled={false} // Enable for all users
+                        />
+                    </div>
+
+                    <DialogFooter>
+                        <Button
+                            type="button"
+                            variant="outline"
+                            onClick={onClose}
+                            disabled={loading}
+                        >
+                            Batal
+                        </Button>
+                        <Button type="submit" disabled={loading}>
+                            {loading ? "Menyimpan..." : "Simpan"}
+                        </Button>
+                    </DialogFooter>
+                </form>
+            </DialogContent>
+        </Dialog>
+    );
+}
diff --git a/resources/js/pages/admin/hukum/index_hukum.tsx b/resources/js/pages/admin/hukum/index_hukum.tsx
index 822daa1..017e047 100644
--- a/resources/js/pages/admin/hukum/index_hukum.tsx
+++ b/resources/js/pages/admin/hukum/index_hukum.tsx
@@ -1,5 +1,4 @@
-import React, { useEffect, useState } from "react";
-import { useForm } from "@inertiajs/react";
+import React, { useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import {
@@ -12,14 +11,6 @@ import {
 } from "@/components/ui/table";
 import { useToast } from "@/hooks/use-toast";
 import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
-import {
-    Dialog,
-    DialogTrigger,
-    DialogContent,
-    DialogHeader,
-    DialogTitle,
-    DialogFooter,
-} from "@/components/ui/dialog";
 import {
     Search,
     Plus,
@@ -27,195 +18,176 @@ import {
     Trash2,
     ChevronLeft,
     ChevronRight,
+    AlertTriangle,
+    Edit,
+    FileText,
 } from "lucide-react";
 import AuthenticatedLayout from "@/layouts/authenticated-layout";
-import { Head } from "@inertiajs/react";
+import { Head, router } from "@inertiajs/react";
 import { Toaster } from "@/components/ui/toaster";
-import axios from "axios";
+import { HukumType } from "@/types/perusahaan";
+import { AddHukumModal } from "@/components/modals/add-sanksi-hukum";
+import { AddPenaatanModal } from "@/components/modals/add-penaatan-modal";
+import {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
 
-interface Hukum {
-    HukumId: number;
-    PerusahaanId: number | null;
-    JenisSanksiId: number | null;
-    SanksiNumber: string;
-    SanksiDate: string;
-    SanksiFile: string;
-    StatusPenaatan: number;
-    PenaatanNumber: string;
-    PenaatanDate: string;
-    PenaatanFile: string;
-    IsDeleted: number;
-    perusahaan: { nama: string } | null;
-    jenisSanksi: { nama: string } | null;
+interface HukumIndexProps {
+    hukumData: HukumType[];
+    perusahaan: { PerusahaanId: number; NamaPerusahaan: string }[];
+    jenisSanksi: { JenisSanksiId: number; NamaJenisSanksi: string }[];
+    penaatan: { PenaatanId: number; NamaPenaatan: string }[];
 }
 
 const ITEMS_PER_PAGE = 5;
 
-export default function HukumIndex() {
+export default function HukumIndex({
+    hukumData = [],
+    perusahaan = [],
+    jenisSanksi = [],
+    penaatan = [],
+}: HukumIndexProps) {
     const { toast } = useToast();
-    const [dataHukum, setDataHukum] = useState<Hukum[]>([]);
     const [search, setSearch] = useState("");
-    const [filteredHukum, setFilteredHukum] = useState<Hukum[]>([]);
+    const [filteredHukum, setFilteredHukum] = useState<HukumType[]>(
+        hukumData || []
+    );
+
+    const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+    const [deletingData, setDeletingData] = useState<HukumType | null>(null);
+    const [isDeleting, setIsDeleting] = useState(false);
+
     const [currentPage, setCurrentPage] = useState(1);
     const [isModalOpen, setIsModalOpen] = useState(false);
-    const [editing, setEditing] = useState(false);
-    const [deleteConfirm, setDeleteConfirm] = useState<Hukum | null>(null);
-
-    const {
-        data,
-        setData,
-        post,
-        put,
-        delete: destroy,
-        reset,
-    } = useForm<Hukum>({
-        HukumId: 0,
-        PerusahaanId: null,
-        JenisSanksiId: null,
-        SanksiNumber: "",
-        SanksiDate: "",
-        SanksiFile: "",
-        StatusPenaatan: 1,
-        PenaatanNumber: "",
-        PenaatanDate: "",
-        PenaatanFile: "",
-        IsDeleted: 0,
-        perusahaan: null,
-        jenisSanksi: null,
-    });
-
-    useEffect(() => {
-        axios
-            .get("/admin/hukum")
-            .then((response) => {
-                if (response.data && response.data.data) {
-                    setDataHukum(response.data.data);
-                    setFilteredHukum(response.data.data);
-                } else {
-                    setDataHukum([]);
-                    setFilteredHukum([]);
-                }
-            })
-            .catch((error) => {
-                console.error("Error fetching data:", error);
-                setDataHukum([]);
-                setFilteredHukum([]);
-            });
-    }, []);
-
-    // Filter Data
-    useEffect(() => {
-        let filtered = dataHukum;
-        if (search) {
-            filtered = filtered.filter((hukum) =>
-                hukum.SanksiNumber.toLowerCase().includes(search.toLowerCase())
-            );
-        }
-        setFilteredHukum(filtered);
-        setCurrentPage(1);
-    }, [dataHukum, search]);
-
-    // Pagination
-    const totalPages = filteredHukum?.length
-        ? Math.ceil(filteredHukum.length / ITEMS_PER_PAGE)
-        : 1;
+    const [isPenaatanModalOpen, setIsPenaatanModalOpen] = useState(false);
+    const [editingData, setEditingData] = useState<HukumType | null>(null);
+    const [selectedHukum, setSelectedHukum] = useState<HukumType | null>(null);
 
+    // Pagination setup
+    const totalPages = Math.ceil((filteredHukum?.length || 0) / ITEMS_PER_PAGE);
     const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
     const endIndex = startIndex + ITEMS_PER_PAGE;
     const currentItems = filteredHukum.slice(startIndex, endIndex);
 
     // Handle Search
     const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setSearch(e.target.value);
+        const keyword = e.target.value.toLowerCase();
+        setSearch(keyword);
+        setFilteredHukum(
+            hukumData.filter((hukum) =>
+                hukum.SanksiNumber.toLowerCase().includes(keyword)
+            )
+        );
+        setCurrentPage(1);
     };
 
-    // Handle Page Change
-    const handlePageChange = (page: number) => {
-        setCurrentPage(page);
+    // Handle Open Modal (Add/Edit)
+    const handleOpenModal = (data?: HukumType) => {
+        setEditingData(data || null);
+        setIsModalOpen(true);
     };
 
-    // Handle Form Submission
-    const handleSubmit = (e: React.FormEvent) => {
-        e.preventDefault();
-        const url = editing ? `/admin/hukum/${data.HukumId}` : "/admin/hukum";
+    // Handle Delete Modal
+    const handleDeleteModal = (data: HukumType) => {
+        setDeletingData(data);
+        setIsDeleteModalOpen(true);
+    };
 
-        const requestMethod = editing ? put : post;
-        requestMethod(url, {
+    // Handle Open Modal for Penaatan
+    const handleOpenPenaatanModal = (hukum: HukumType) => {
+        setSelectedHukum(hukum);
+        setIsPenaatanModalOpen(true);
+    };
+
+    const handleDeleteConfirm = () => {
+        if (!deletingData) return;
+
+        setIsDeleting(true);
+
+        router.delete(`/admin/hukum/${deletingData.HukumId}`, {
+            preserveScroll: true,
             onSuccess: () => {
+                // Update the local state by filtering out the deleted item
+                setFilteredHukum((prev) =>
+                    prev.filter((item) => item.HukumId !== deletingData.HukumId)
+                );
+
                 toast({
                     title: "Berhasil",
-                    description: editing
-                        ? "Data berhasil diperbarui"
-                        : "Data berhasil ditambahkan",
+                    description: "Data berhasil dihapus",
                     variant: "default",
                 });
-                setIsModalOpen(false);
-                reset();
-                setEditing(false);
+
+                // Adjust page if necessary (if we're on the last page and it's now empty)
+                const newTotalItems = filteredHukum.length - 1;
+                const newTotalPages = Math.ceil(newTotalItems / ITEMS_PER_PAGE);
+
+                if (currentPage > newTotalPages && newTotalPages > 0) {
+                    setCurrentPage(newTotalPages);
+                }
+
+                setIsDeleteModalOpen(false);
+                setDeletingData(null);
+                setIsDeleting(false);
             },
-            onError: () => {
+            onError: (errors) => {
+                console.error("Error deleting record:", errors);
                 toast({
                     title: "Gagal",
-                    description: "Terjadi kesalahan saat menyimpan data",
+                    description: "Terjadi kesalahan saat menghapus data",
                     variant: "destructive",
                 });
+                setIsDeleting(false);
+            },
+            onFinish: () => {
+                // This will run regardless of success or error
+                setIsDeleting(false);
             },
         });
     };
 
-    // Handle Edit
-    const handleEdit = (hukum: Hukum) => {
-        setData({ ...hukum });
-        setEditing(true);
-        setIsModalOpen(true);
+    // Handle Success Callback
+    const handleSuccess = () => {
+        toast({
+            title: "Berhasil",
+            description: editingData
+                ? "Data berhasil diperbarui"
+                : "Data berhasil ditambahkan",
+            variant: "default",
+        });
+        setIsModalOpen(false);
+        setEditingData(null);
     };
 
-    // Handle Delete
-    const handleDelete = () => {
-        if (deleteConfirm) {
-            destroy(`/admin/hukum/${deleteConfirm.HukumId}`, {
-                onSuccess: () => {
-                    toast({
-                        title: "Berhasil",
-                        description: "Data berhasil dihapus",
-                        variant: "default",
-                    });
-                    setDeleteConfirm(null);
-                },
-                onError: () => {
-                    toast({
-                        title: "Gagal",
-                        description: "Terjadi kesalahan saat menghapus data",
-                        variant: "destructive",
-                    });
-                },
-            });
-        }
-    };
+    console.log("hukumData", hukumData);
 
     return (
-        <AuthenticatedLayout header="Penegakan Hukum">
+        <AuthenticatedLayout header="Riwayat Pengenaan dan Penaatan Sanksi Administratif">
             <Head title="Penegakan Hukum" />
             <div className="container mx-auto p-4">
                 <Card className="shadow-lg">
-                    <CardHeader>
-                        <div className="flex justify-between">
-                            <Input
-                                type="text"
-                                placeholder="Cari Sanksi..."
-                                value={search}
-                                onChange={handleSearch}
-                            />
-                            <Button
-                                onClick={() => {
-                                    setEditing(false);
-                                    setIsModalOpen(true);
-                                }}
-                            >
-                                <Plus className="h-4 w-4" />
-                                Tambah
-                            </Button>
-                        </div>
+                    <CardHeader className="flex md:flex-row flex-col justify-between items-center">
+                        <Input
+                            type="text"
+                            placeholder="Cari Sanksi Administratif..."
+                            value={search}
+                            onChange={handleSearch}
+                            className="w-96 border-gray-300 focus:border-blue-500 focus:ring-blue-200 rounded-lg"
+                        />
+                        <Button
+                            onClick={() => handleOpenModal()}
+                            className="bg-blue-600 hover:bg-blue-700 text-white"
+                        >
+                            <Plus className="h-4 w-4 mr-2" />
+                            Buat Sanksi Administratif
+                        </Button>
                     </CardHeader>
                     <CardContent>
                         <Table>
@@ -226,70 +198,226 @@ export default function HukumIndex() {
                                     <TableHead>Jenis Sanksi</TableHead>
                                     <TableHead>Nomor SK Sanksi</TableHead>
                                     <TableHead>Tanggal Sanksi</TableHead>
-                                    <TableHead>SK Sanksi</TableHead>
+                                    <TableHead className="border-r">
+                                        SK Sanksi
+                                    </TableHead>
                                     <TableHead>Status Penaatan</TableHead>
-                                    <TableHead>Nomor Penaatan</TableHead>
-                                    <TableHead>Tanggal Penaatan</TableHead>
+                                    <TableHead>Nomor SK Penaatan</TableHead>
+                                    <TableHead>Tanggal SK Penaatan</TableHead>
                                     <TableHead>SK Penaatan</TableHead>
-                                    <TableHead>Aksi</TableHead>
                                 </TableRow>
                             </TableHeader>
                             <TableBody>
-                                {currentItems.map((hukum, index) => (
-                                    <TableRow key={hukum.HukumId}>
-                                        <TableCell>
-                                            {startIndex + index + 1}
-                                        </TableCell>
-                                        <TableCell>
-                                            {hukum.perusahaan?.nama}
-                                        </TableCell>
-                                        <TableCell>
-                                            {hukum.jenisSanksi?.nama}
-                                        </TableCell>
-                                        <TableCell>
-                                            {hukum.SanksiNumber}
-                                        </TableCell>
-                                        <TableCell>
-                                            {hukum.SanksiDate}
-                                        </TableCell>
-                                        <TableCell>
-                                            {hukum.SanksiFile}
-                                        </TableCell>
-                                        <TableCell>
-                                            {hukum.StatusPenaatan}
-                                        </TableCell>
-                                        <TableCell>
-                                            {hukum.PenaatanNumber}
-                                        </TableCell>
-                                        <TableCell>
-                                            {hukum.PenaatanDate}
-                                        </TableCell>
-                                        <TableCell>
-                                            {hukum.PenaatanFile}
-                                        </TableCell>
-                                        <TableCell>
-                                            <Button
-                                                onClick={() =>
-                                                    handleEdit(hukum)
-                                                }
-                                            >
-                                                <Pencil className="h-4 w-4" />
-                                            </Button>
-                                            <Button
-                                                onClick={() =>
-                                                    setDeleteConfirm(hukum)
-                                                }
-                                            >
-                                                <Trash2 className="h-4 w-4" />
-                                            </Button>
+                                {currentItems?.length > 0 ? (
+                                    currentItems.map((hukum, index) => (
+                                        <TableRow key={hukum.HukumId}>
+                                            <TableCell>
+                                                {startIndex + index + 1}
+                                            </TableCell>
+                                            <TableCell className="flex flex-col gap-2">
+                                                <Button
+                                                    variant="link"
+                                                    className="px-2 py-1 bg-green-100 h-auto font-normal text-left flex items-center gap-1"
+                                                    onClick={() =>
+                                                        handleOpenModal(hukum)
+                                                    }
+                                                >
+                                                    <Edit className="h-3 w-3 text-green-500" />
+                                                    {hukum.perusahaan
+                                                        ?.NamaPerusahaan || "-"}
+                                                </Button>
+                                                <Button
+                                                    variant="link"
+                                                    className="px-2 py-1 bg-red-100 h-auto font-normal text-left flex items-center gap-1"
+                                                    onClick={() =>
+                                                        handleDeleteModal(hukum)
+                                                    }
+                                                >
+                                                    <Trash2 className="h-3 w-3 text-red-500" />
+                                                    Hapus
+                                                </Button>
+                                            </TableCell>
+                                            <TableCell>
+                                                {hukum.jenis_sanksi
+                                                    ?.NamaJenisSanksi || "-"}
+                                            </TableCell>
+                                            <TableCell>
+                                                {hukum.SanksiNumber || "-"}
+                                            </TableCell>
+                                            <TableCell>
+                                                {hukum.SanksiDate
+                                                    ? new Date(
+                                                          hukum.SanksiDate
+                                                      ).toLocaleDateString(
+                                                          "id-ID",
+                                                          {
+                                                              day: "2-digit",
+                                                              month: "long",
+                                                              year: "numeric",
+                                                          }
+                                                      )
+                                                    : "-"}
+                                            </TableCell>
+                                            <TableCell className="border-r">
+                                                {hukum.SanksiFile ? (
+                                                    <a
+                                                        href={`/storage/${hukum.SanksiFile}`}
+                                                        target="_blank"
+                                                        rel="noopener noreferrer"
+                                                        className="flex items-center justify-center"
+                                                    >
+                                                        <FileText className="w-4 h-4 text-green-600 hover:text-green-800" />
+                                                    </a>
+                                                ) : (
+                                                    "-"
+                                                )}
+                                            </TableCell>
+                                            <TableCell>
+                                                <Button
+                                                    variant="link"
+                                                    className="px-2 py-1 bg-blue-100 h-auto font-normal text-left flex items-center gap-1"
+                                                    onClick={() =>
+                                                        handleOpenPenaatanModal(
+                                                            hukum
+                                                        )
+                                                    }
+                                                >
+                                                    <Edit className="h-3 w-3 text-blue-500" />
+                                                    {hukum.penaatan
+                                                        ?.NamaPenaatan || "-"}
+                                                </Button>
+                                            </TableCell>
+                                            <TableCell>
+                                                {hukum.PenaatanNumber || "-"}
+                                            </TableCell>
+                                            <TableCell>
+                                                {hukum.PenaatanDate
+                                                    ? new Date(
+                                                          hukum.PenaatanDate
+                                                      ).toLocaleDateString(
+                                                          "id-ID",
+                                                          {
+                                                              day: "2-digit",
+                                                              month: "long",
+                                                              year: "numeric",
+                                                          }
+                                                      )
+                                                    : "-"}
+                                            </TableCell>
+                                            <TableCell>
+                                                {hukum.PenaatanFile ? (
+                                                    <a
+                                                        href={`/storage/${hukum.PenaatanFile}`}
+                                                        target="_blank"
+                                                        rel="noopener noreferrer"
+                                                        className="flex items-center justify-center"
+                                                    >
+                                                        <FileText className="w-4 h-4 text-green-600 hover:text-green-800" />
+                                                    </a>
+                                                ) : (
+                                                    "-"
+                                                )}
+                                            </TableCell>
+                                        </TableRow>
+                                    ))
+                                ) : (
+                                    <TableRow>
+                                        <TableCell
+                                            colSpan={10}
+                                            className="text-center py-4 text-gray-500"
+                                        >
+                                            Tidak ada data
                                         </TableCell>
                                     </TableRow>
-                                ))}
+                                )}
                             </TableBody>
                         </Table>
                     </CardContent>
                 </Card>
+                {/* Pagination */}
+                <div className="mt-4 flex justify-end gap-2">
+                    <Button
+                        variant="outline"
+                        onClick={() => setCurrentPage(currentPage - 1)}
+                        disabled={currentPage === 1}
+                    >
+                        <ChevronLeft className="h-4 w-4" />
+                    </Button>
+                    <Button
+                        variant="outline"
+                        onClick={() => setCurrentPage(currentPage + 1)}
+                        disabled={currentPage === totalPages}
+                    >
+                        <ChevronRight className="h-4 w-4" />
+                    </Button>
+                </div>
             </div>
+
+            {/* Modal for Adding/Editing Hukum */}
+            <AddHukumModal
+                open={isModalOpen}
+                onClose={() => setIsModalOpen(false)}
+                onSuccess={handleSuccess}
+                hukumtype={hukumData}
+                perusahaan={perusahaan}
+                penaatan={penaatan}
+                jenisSanksi={jenisSanksi}
+                editingData={editingData}
+            />
+
+            {/* Modal for Updating Penaatan */}
+            <AddPenaatanModal
+                open={isPenaatanModalOpen}
+                onClose={() => setIsPenaatanModalOpen(false)}
+                onSuccess={() => {
+                    toast({
+                        title: "Berhasil",
+                        description: "Penaatan diperbarui",
+                        variant: "default",
+                    });
+                    setIsPenaatanModalOpen(false);
+                }}
+                editingData={selectedHukum}
+                penaatan={penaatan}
+            />
+
+            {/* Delete Confirmation Dialog */}
+            <AlertDialog
+                open={isDeleteModalOpen}
+                onOpenChange={setIsDeleteModalOpen}
+            >
+                <AlertDialogContent>
+                    <AlertDialogHeader>
+                        <AlertDialogTitle>Konfirmasi Hapus</AlertDialogTitle>
+                        <AlertDialogDescription>
+                            Apakah anda yakin ingin menghapus data sanksi untuk
+                            perusahaan{" "}
+                            <strong>
+                                {deletingData?.perusahaan?.NamaPerusahaan}
+                            </strong>
+                            ?
+                            <br />
+                            Tindakan ini tidak dapat dibatalkan.
+                        </AlertDialogDescription>
+                    </AlertDialogHeader>
+                    <AlertDialogFooter>
+                        <AlertDialogCancel disabled={isDeleting}>
+                            Batal
+                        </AlertDialogCancel>
+                        <AlertDialogAction
+                            onClick={(e) => {
+                                e.preventDefault();
+                                handleDeleteConfirm();
+                            }}
+                            disabled={isDeleting}
+                            className="bg-red-600 hover:bg-red-700 text-white"
+                        >
+                            {isDeleting ? "Menghapus..." : "Hapus"}
+                        </AlertDialogAction>
+                    </AlertDialogFooter>
+                </AlertDialogContent>
+            </AlertDialog>
+
             <Toaster />
         </AuthenticatedLayout>
     );