diff --git a/resources/js/components/notification-bell.tsx b/resources/js/components/notification-bell.tsx
index 205a461..0bcc794 100644
--- a/resources/js/components/notification-bell.tsx
+++ b/resources/js/components/notification-bell.tsx
@@ -1,3 +1,4 @@
+import { router } from '@inertiajs/react';
 import { Bell, Check, Trash2 } from 'lucide-react';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { Badge } from '@/components/ui/badge';
@@ -189,15 +190,11 @@ export function NotificationBell() {
                                         : 'opacity-60'
                                 }`}
                             >
-                                <a
-                                    href={notification.url || '#'}
+                                <div
                                     className="min-w-0 flex-1 cursor-pointer"
-                                    onClick={(e) => {
-                                        e.preventDefault();
-
+                                    onClick={() => {
                                         if (notification.url) {
-                                            window.location.href =
-                                                notification.url;
+                                            router.visit(notification.url);
                                         }
                                     }}
                                 >
@@ -225,7 +222,7 @@ export function NotificationBell() {
                                             minute: '2-digit',
                                         })}
                                     </span>
-                                </a>
+                                </div>
                                 <div className="flex shrink-0 flex-col gap-1 pt-0.5">
                                     {!notification.is_read && (
                                         <Button
diff --git a/resources/js/pages/admin/finance/payroll-period/show.tsx b/resources/js/pages/admin/finance/payroll-period/show.tsx
index d57e1d5..2548e9f 100644
--- a/resources/js/pages/admin/finance/payroll-period/show.tsx
+++ b/resources/js/pages/admin/finance/payroll-period/show.tsx
@@ -1,4 +1,4 @@
-import { Form, Head, router } from '@inertiajs/react';
+import { Form, Head, Link, router } from '@inertiajs/react';
 import { ArrowLeft } from 'lucide-react';
 import { useState } from 'react';
 import { ConfirmDialog } from '@/components/confirm-dialog';
@@ -139,10 +139,10 @@ export default function PayrollPeriodShow({ payrollPeriod }: Props) {
                         </p>
                     </div>
                     <Button asChild variant="outline">
-                        <a href={payrollPeriodsIndex.url()}>
+                        <Link href={payrollPeriodsIndex.url()}>
                             <ArrowLeft className="h-4 w-4" />
                             Kembali
-                        </a>
+                        </Link>
                     </Button>
                 </div>
 
diff --git a/resources/js/pages/admin/hr/employee/create.tsx b/resources/js/pages/admin/hr/employee/create.tsx
index ff001b8..de816eb 100644
--- a/resources/js/pages/admin/hr/employee/create.tsx
+++ b/resources/js/pages/admin/hr/employee/create.tsx
@@ -1,4 +1,4 @@
-import { Form, Head } from '@inertiajs/react';
+import { Form, Head, Link } from '@inertiajs/react';
 import { AlertCircle, ArrowLeft } from 'lucide-react';
 import { useState } from 'react';
 import { DatePicker } from '@/components/date-picker';
@@ -55,10 +55,10 @@ export default function EmployeeCreate({ roles }: Props) {
                         </h2>
                     </div>
                     <Button asChild variant="outline">
-                        <a href={employeeIndex.url()}>
+                        <Link href={employeeIndex.url()}>
                             <ArrowLeft className="h-4 w-4" />
                             Kembali
-                        </a>
+                        </Link>
                     </Button>
                 </div>
 
diff --git a/resources/js/pages/admin/hr/employee/edit.tsx b/resources/js/pages/admin/hr/employee/edit.tsx
index 26f2a1f..0ae7f94 100644
--- a/resources/js/pages/admin/hr/employee/edit.tsx
+++ b/resources/js/pages/admin/hr/employee/edit.tsx
@@ -1,4 +1,4 @@
-import { Form, Head } from '@inertiajs/react';
+import { Form, Head, Link } from '@inertiajs/react';
 import { ArrowLeft } from 'lucide-react';
 import { useMemo, useState } from 'react';
 import { DatePicker } from '@/components/date-picker';
@@ -94,10 +94,10 @@ export default function EmployeeEdit({ employee, roles }: Props) {
                         </h2>
                     </div>
                     <Button asChild variant="outline">
-                        <a href={employeeIndex.url()}>
+                        <Link href={employeeIndex.url()}>
                             <ArrowLeft className="h-4 w-4" />
                             Kembali
-                        </a>
+                        </Link>
                     </Button>
                 </div>
 
diff --git a/resources/js/pages/admin/hr/employee/index.tsx b/resources/js/pages/admin/hr/employee/index.tsx
index 0b0eab6..ace8a73 100644
--- a/resources/js/pages/admin/hr/employee/index.tsx
+++ b/resources/js/pages/admin/hr/employee/index.tsx
@@ -1,4 +1,4 @@
-import { Head, router } from '@inertiajs/react';
+import { Head, Link, router } from '@inertiajs/react';
 import { Plus } from 'lucide-react';
 import { useState } from 'react';
 import type { PaginationState } from '@/components/data-table';
@@ -94,7 +94,7 @@ export default function EmployeeIndex({ employees, filters }: Props) {
 
     const columns = createEmployeeColumns({
         handleEdit: (employee) => {
-            window.location.href = employeeEdit.url(employee.id);
+            router.visit(employeeEdit.url(employee.id));
         },
         handleDeleteClick: (employee) => setDeleting(employee),
         handleResetPassword: (employee) => setResetPasswordTarget(employee),
@@ -184,10 +184,10 @@ export default function EmployeeIndex({ employees, filters }: Props) {
                     title="Pegawai"
                     actions={
                         <Button asChild>
-                            <a href={employeeCreate.url()}>
+                            <Link href={employeeCreate.url()}>
                                 <Plus className="h-4 w-4" />
                                 Tambah
-                            </a>
+                            </Link>
                         </Button>
                     }
                 />
diff --git a/resources/js/pages/admin/manage/cutting/create.tsx b/resources/js/pages/admin/manage/cutting/create.tsx
index 742a822..3571d8f 100644
--- a/resources/js/pages/admin/manage/cutting/create.tsx
+++ b/resources/js/pages/admin/manage/cutting/create.tsx
@@ -19,7 +19,7 @@ import { formatNumber } from '@/lib/format';
 import { getTemporaryUrl } from '@/lib/upload';
 import { formatCurrency } from '@/lib/utils';
 import { index as cuttingIndex, store } from '@/routes/admin/manage/cuttings';
-import { Form, Head, usePage } from '@inertiajs/react';
+import { Form, Head, Link, usePage } from '@inertiajs/react';
 import { ArrowLeft, Check, Layers, Plus, ShoppingCart, Trash2 } from 'lucide-react';
 import { useCallback, useMemo, useRef, useState } from 'react';
 import type { CuttingCreateData } from './columns';
@@ -290,10 +290,10 @@ export default function CuttingCreate({ data }: Props) {
                 <div className="flex items-center justify-between">
                     <h2 className="text-2xl font-semibold tracking-tight">Tambah Cutting</h2>
                     <Button asChild variant="outline">
-                        <a href={cuttingIndex.url()}>
+                        <Link href={cuttingIndex.url()}>
                             <ArrowLeft className="h-4 w-4" />
                             Kembali
-                        </a>
+                        </Link>
                     </Button>
                 </div>
 
diff --git a/resources/js/pages/admin/manage/cutting/edit.tsx b/resources/js/pages/admin/manage/cutting/edit.tsx
index c17c7ff..435ec5e 100644
--- a/resources/js/pages/admin/manage/cutting/edit.tsx
+++ b/resources/js/pages/admin/manage/cutting/edit.tsx
@@ -17,7 +17,7 @@ import { formatNumber } from '@/lib/format';
 import { getTemporaryUrl } from '@/lib/upload';
 import { formatCurrency } from '@/lib/utils';
 import { index as cuttingIndex, update } from '@/routes/admin/manage/cuttings';
-import { Form, Head } from '@inertiajs/react';
+import { Form, Head, Link } from '@inertiajs/react';
 import { ArrowLeft, Check, Layers, Plus, ShoppingCart, Trash2 } from 'lucide-react';
 import { useCallback, useMemo, useRef, useState } from 'react';
 import type { CuttingCreateData, CuttingForEdit } from './columns';
@@ -267,10 +267,10 @@ export default function CuttingEdit({ cutting, data }: Props) {
                 <div className="flex items-center justify-between">
                     <h2 className="text-2xl font-semibold tracking-tight">Edit Cutting</h2>
                     <Button asChild variant="outline">
-                        <a href={cuttingIndex.url()}>
+                        <Link href={cuttingIndex.url()}>
                             <ArrowLeft className="h-4 w-4" />
                             Kembali
-                        </a>
+                        </Link>
                     </Button>
                 </div>
 
diff --git a/resources/js/pages/admin/manage/cutting/index.tsx b/resources/js/pages/admin/manage/cutting/index.tsx
index fadfd41..c3bb6d9 100644
--- a/resources/js/pages/admin/manage/cutting/index.tsx
+++ b/resources/js/pages/admin/manage/cutting/index.tsx
@@ -1,4 +1,4 @@
-import { Head, router } from '@inertiajs/react';
+import { Head, Link, router } from '@inertiajs/react';
 import { Plus } from 'lucide-react';
 import { useState } from 'react';
 import { CardTable } from '@/components/card-table';
@@ -67,10 +67,10 @@ export default function CuttingIndex({ cuttings }: Props) {
                     title="Cutting"
                     actions={
                         <Button asChild>
-                            <a href={cuttingCreate.url()}>
+                            <Link href={cuttingCreate.url()}>
                                 <Plus className="h-4 w-4" />
                                 Tambah
-                            </a>
+                            </Link>
                         </Button>
                     }
                 />
@@ -103,7 +103,7 @@ export default function CuttingIndex({ cuttings }: Props) {
                             isExpanded={isExpanded}
                             onToggleExpand={onToggleExpand}
                             onEdit={(c) => {
-                                window.location.href = cuttingEdit.url(c.id);
+                                router.visit(cuttingEdit.url(c.id));
                             }}
                             onDelete={(c) => setDeleting(c)}
                         />
diff --git a/resources/js/pages/admin/manage/purchase/create.tsx b/resources/js/pages/admin/manage/purchase/create.tsx
index bda4e4b..1ce05a3 100644
--- a/resources/js/pages/admin/manage/purchase/create.tsx
+++ b/resources/js/pages/admin/manage/purchase/create.tsx
@@ -1,6 +1,6 @@
 'use no memo';
 
-import { Form, Head, usePage } from '@inertiajs/react';
+import { Form, Head, Link, usePage } from '@inertiajs/react';
 import {
     ArrowLeft,
     Check,
@@ -428,10 +428,10 @@ export default function PurchaseCreate({ data }: Props) {
                         Tambah Belanja
                     </h2>
                     <Button asChild variant="outline">
-                        <a href={purchaseIndex.url()}>
+                        <Link href={purchaseIndex.url()}>
                             <ArrowLeft className="h-4 w-4" />
                             Kembali
-                        </a>
+                        </Link>
                     </Button>
                 </div>
 
diff --git a/resources/js/pages/admin/manage/purchase/edit.tsx b/resources/js/pages/admin/manage/purchase/edit.tsx
index 6c6be2f..6bc3eae 100644
--- a/resources/js/pages/admin/manage/purchase/edit.tsx
+++ b/resources/js/pages/admin/manage/purchase/edit.tsx
@@ -1,6 +1,6 @@
 'use no memo';
 
-import { Form, Head } from '@inertiajs/react';
+import { Form, Head, Link } from '@inertiajs/react';
 import {
     ArrowLeft,
     Check,
@@ -369,10 +369,10 @@ export default function PurchaseEdit({ purchase, data }: Props) {
                         Edit Belanja
                     </h2>
                     <Button asChild variant="outline">
-                        <a href={purchaseIndex.url()}>
+                        <Link href={purchaseIndex.url()}>
                             <ArrowLeft className="h-4 w-4" />
                             Kembali
-                        </a>
+                        </Link>
                     </Button>
                 </div>
 
diff --git a/resources/js/pages/admin/manage/purchase/index.tsx b/resources/js/pages/admin/manage/purchase/index.tsx
index 3051f4b..d81b94b 100644
--- a/resources/js/pages/admin/manage/purchase/index.tsx
+++ b/resources/js/pages/admin/manage/purchase/index.tsx
@@ -1,4 +1,4 @@
-import { Head, router } from '@inertiajs/react';
+import { Head, Link, router } from '@inertiajs/react';
 import { Plus } from 'lucide-react';
 import { useState } from 'react';
 import { CardTable } from '@/components/card-table';
@@ -67,10 +67,10 @@ export default function PurchaseIndex({ purchases }: Props) {
                     title="Belanja"
                     actions={
                         <Button asChild>
-                            <a href={purchaseCreate.url()}>
+                            <Link href={purchaseCreate.url()}>
                                 <Plus className="h-4 w-4" />
                                 Tambah
-                            </a>
+                            </Link>
                         </Button>
                     }
                 />
@@ -103,7 +103,7 @@ export default function PurchaseIndex({ purchases }: Props) {
                             isExpanded={isExpanded}
                             onToggleExpand={onToggleExpand}
                             onEdit={(p) => {
-                                window.location.href = purchaseEdit.url(p.id);
+                                router.visit(purchaseEdit.url(p.id));
                             }}
                             onDelete={(p) => setDeleting(p)}
                         />
diff --git a/resources/js/pages/admin/manage/restock/create.tsx b/resources/js/pages/admin/manage/restock/create.tsx
index 5fbd143..4e89bc5 100644
--- a/resources/js/pages/admin/manage/restock/create.tsx
+++ b/resources/js/pages/admin/manage/restock/create.tsx
@@ -1,6 +1,6 @@
 'use no memo';
 
-import { Form, Head, usePage } from '@inertiajs/react';
+import { Form, Head, Link, usePage } from '@inertiajs/react';
 import { ArrowLeft, Minus, Plus, ShoppingCart, Trash2 } from 'lucide-react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { ConfirmDialog } from '@/components/confirm-dialog';
@@ -219,10 +219,10 @@ return 0;
                         Tambah Restock
                     </h2>
                     <Button asChild variant="outline">
-                        <a href={restockIndex.url()}>
+                        <Link href={restockIndex.url()}>
                             <ArrowLeft className="h-4 w-4" />
                             Kembali
-                        </a>
+                        </Link>
                     </Button>
                 </div>
 
diff --git a/resources/js/pages/admin/manage/restock/edit.tsx b/resources/js/pages/admin/manage/restock/edit.tsx
index 0d12591..90a61d3 100644
--- a/resources/js/pages/admin/manage/restock/edit.tsx
+++ b/resources/js/pages/admin/manage/restock/edit.tsx
@@ -1,6 +1,6 @@
 'use no memo';
 
-import { Form, Head } from '@inertiajs/react';
+import { Form, Head, Link } from '@inertiajs/react';
 import { ArrowLeft, Minus, Plus, ShoppingCart, Trash2 } from 'lucide-react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { ConfirmDialog } from '@/components/confirm-dialog';
@@ -193,10 +193,10 @@ return 0;
                         Edit Restock
                     </h2>
                     <Button asChild variant="outline">
-                        <a href={restockIndex.url()}>
+                        <Link href={restockIndex.url()}>
                             <ArrowLeft className="h-4 w-4" />
                             Kembali
-                        </a>
+                        </Link>
                     </Button>
                 </div>
 
diff --git a/resources/js/pages/admin/manage/restock/index.tsx b/resources/js/pages/admin/manage/restock/index.tsx
index 9a3d846..3152363 100644
--- a/resources/js/pages/admin/manage/restock/index.tsx
+++ b/resources/js/pages/admin/manage/restock/index.tsx
@@ -1,4 +1,4 @@
-import { Head, router } from '@inertiajs/react';
+import { Head, Link, router } from '@inertiajs/react';
 import { Plus } from 'lucide-react';
 import { useState } from 'react';
 import { CardTable } from '@/components/card-table';
@@ -67,10 +67,10 @@ export default function RestockIndex({ restocks }: Props) {
                     title="Restock"
                     actions={
                         <Button asChild>
-                            <a href={restockCreate.url()}>
+                            <Link href={restockCreate.url()}>
                                 <Plus className="h-4 w-4" />
                                 Tambah
-                            </a>
+                            </Link>
                         </Button>
                     }
                 />
@@ -103,7 +103,7 @@ export default function RestockIndex({ restocks }: Props) {
                             isExpanded={isExpanded}
                             onToggleExpand={onToggleExpand}
                             onEdit={(r) => {
-                                window.location.href = restockEdit.url(r.id);
+                                router.visit(restockEdit.url(r.id));
                             }}
                             onDelete={(r) => setDeleting(r)}
                         />
diff --git a/resources/js/pages/admin/manage/transaction/create.tsx b/resources/js/pages/admin/manage/transaction/create.tsx
index 486106c..e1ec084 100644
--- a/resources/js/pages/admin/manage/transaction/create.tsx
+++ b/resources/js/pages/admin/manage/transaction/create.tsx
@@ -1,6 +1,6 @@
 'use no memo';
 
-import { Form, Head, usePage } from '@inertiajs/react';
+import { Form, Head, Link, usePage } from '@inertiajs/react';
 import { ArrowLeft, Minus, Plus, ShoppingCart, Trash2 } from 'lucide-react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { ConfirmDialog } from '@/components/confirm-dialog';
@@ -299,10 +299,10 @@ export default function TransactionCreate({ data }: Props) {
                         Tambah Transaksi
                     </h2>
                     <Button asChild variant="outline">
-                        <a href={transactionIndex.url()}>
+                        <Link href={transactionIndex.url()}>
                             <ArrowLeft className="h-4 w-4" />
                             Kembali
-                        </a>
+                        </Link>
                     </Button>
                 </div>
 
diff --git a/resources/js/pages/admin/manage/transaction/edit.tsx b/resources/js/pages/admin/manage/transaction/edit.tsx
index 14e15fe..8eddb6a 100644
--- a/resources/js/pages/admin/manage/transaction/edit.tsx
+++ b/resources/js/pages/admin/manage/transaction/edit.tsx
@@ -1,6 +1,6 @@
 'use no memo';
 
-import { Form, Head } from '@inertiajs/react';
+import { Form, Head, Link } from '@inertiajs/react';
 import { ArrowLeft, Minus, Plus, ShoppingCart, Trash2 } from 'lucide-react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { ConfirmDialog } from '@/components/confirm-dialog';
@@ -276,10 +276,10 @@ export default function TransactionEdit({ transaction, data }: Props) {
                         Edit Transaksi
                     </h2>
                     <Button asChild variant="outline">
-                        <a href={transactionIndex.url()}>
+                        <Link href={transactionIndex.url()}>
                             <ArrowLeft className="h-4 w-4" />
                             Kembali
-                        </a>
+                        </Link>
                     </Button>
                 </div>
 
diff --git a/resources/js/pages/admin/manage/transaction/index.tsx b/resources/js/pages/admin/manage/transaction/index.tsx
index e871aff..31e5c45 100644
--- a/resources/js/pages/admin/manage/transaction/index.tsx
+++ b/resources/js/pages/admin/manage/transaction/index.tsx
@@ -1,4 +1,4 @@
-import { Head, router } from '@inertiajs/react';
+import { Head, Link, router } from '@inertiajs/react';
 import { Plus } from 'lucide-react';
 import { useMemo, useState } from 'react';
 import { CardTable } from '@/components/card-table';
@@ -321,10 +321,10 @@ export default function TransactionIndex({
                     title="Transaksi"
                     actions={
                         <Button asChild>
-                            <a href={transactionCreate.url()}>
+                            <Link href={transactionCreate.url()}>
                                 <Plus className="h-4 w-4" />
                                 Tambah
-                            </a>
+                            </Link>
                         </Button>
                     }
                 />
@@ -358,7 +358,7 @@ export default function TransactionIndex({
                             isExpanded={isExpanded}
                             onToggleExpand={onToggleExpand}
                             onEdit={(t) => {
-                                window.location.href = transactionEdit.url(t.id);
+                                router.visit(transactionEdit.url(t.id));
                             }}
                             onDelete={(t) => setDeleting(t)}
                         />
diff --git a/resources/js/pages/admin/master/product/create.tsx b/resources/js/pages/admin/master/product/create.tsx
index 11b9a6d..8b93581 100644
--- a/resources/js/pages/admin/master/product/create.tsx
+++ b/resources/js/pages/admin/master/product/create.tsx
@@ -1,4 +1,4 @@
-import { Form, Head, usePage } from '@inertiajs/react';
+import { Form, Head, Link, usePage } from '@inertiajs/react';
 import {
     ArrowLeft,
     Copy,
@@ -282,10 +282,10 @@ export default function ProductCreate({ categories }: Props) {
                         Tambah Produk
                     </h2>
                     <Button asChild variant="outline">
-                        <a href={productIndex.url()}>
+                        <Link href={productIndex.url()}>
                             <ArrowLeft className="h-4 w-4" />
                             Kembali
-                        </a>
+                        </Link>
                     </Button>
                 </div>
 
diff --git a/resources/js/pages/admin/master/product/edit.tsx b/resources/js/pages/admin/master/product/edit.tsx
index ef05fd5..5f04fdd 100644
--- a/resources/js/pages/admin/master/product/edit.tsx
+++ b/resources/js/pages/admin/master/product/edit.tsx
@@ -1,4 +1,4 @@
-import { Form, Head, usePage } from '@inertiajs/react';
+import { Form, Head, Link, usePage } from '@inertiajs/react';
 import {
     ArrowLeft,
     Copy,
@@ -331,10 +331,10 @@ export default function ProductEdit({ product, categories }: Props) {
                         Edit Produk
                     </h2>
                     <Button asChild variant="outline">
-                        <a href={productIndex.url()}>
+                        <Link href={productIndex.url()}>
                             <ArrowLeft className="h-4 w-4" />
                             Kembali
-                        </a>
+                        </Link>
                     </Button>
                 </div>
 
diff --git a/resources/js/pages/admin/master/product/index.tsx b/resources/js/pages/admin/master/product/index.tsx
index 986cd67..18ab41f 100644
--- a/resources/js/pages/admin/master/product/index.tsx
+++ b/resources/js/pages/admin/master/product/index.tsx
@@ -1,6 +1,4 @@
-import { Head, router } from '@inertiajs/react';
-import { Plus } from 'lucide-react';
-import { useMemo, useState } from 'react';
+import { router } from '@inertiajs/react';
 import { CardTable } from '@/components/card-table';
 import { DeleteConfirmDialog } from '@/components/delete-confirm-dialog';
 import { FilterPopover } from '@/components/filter-popover';
@@ -26,14 +24,17 @@ import { useServerTable } from '@/hooks/use-server-table';
 import {
     destroy,
     create as productCreate,
-    index as productIndex,
     edit as productEdit,
+    index as productIndex,
     toggleStatus,
 } from '@/routes/admin/master/products';
 import {
     destroy as variantDestroy,
     edit as variantEdit,
 } from '@/routes/admin/master/products/variants';
+import { Head, router } from '@inertiajs/react';
+import { Link, Plus } from 'lucide-react';
+import { useMemo, useState } from 'react';
 import type { Product, ProductVariant } from './columns';
 import { ProductCardRow } from './product-card';
 import { VariantSubRow } from './variant/sub-row';
@@ -249,10 +250,10 @@ export default function ProductIndex({ products, categories, filters }: Props) {
                     title="Produk"
                     actions={
                         <Button asChild>
-                            <a href={productCreate.url()}>
+                            <Link href={productCreate.url()}>
                                 <Plus className="h-4 w-4" />
                                 Tambah
-                            </a>
+                            </Link>
                         </Button>
                     }
                 />
@@ -279,14 +280,14 @@ export default function ProductIndex({ products, categories, filters }: Props) {
                             product={item}
                             index={
                                 (pagination.current_page - 1) *
-                                    pagination.per_page +
+                                pagination.per_page +
                                 index +
                                 1
                             }
                             isExpanded={isExpanded}
                             onToggleExpand={onToggleExpand}
                             onEdit={(p) => {
-                                window.location.href = productEdit.url(p.id);
+                                router.visit(productEdit.url(p.id));
                             }}
                             onDelete={(p) => setDeleting(p)}
                             toggleStatusUrl={(id) => toggleStatus.url(id)}
@@ -296,10 +297,12 @@ export default function ProductIndex({ products, categories, filters }: Props) {
                         <VariantSubRow
                             product={product}
                             onEditVariant={(p, v) => {
-                                window.location.href = variantEdit.url({
-                                    product: p.id,
-                                    variant: v.id,
-                                });
+                                router.visit(
+                                    variantEdit.url({
+                                        product: p.id,
+                                        variant: v.id,
+                                    }),
+                                );
                             }}
                             onDeleteVariantClick={(p, v) =>
                                 setDeletingVariant({ product: p, variant: v })
diff --git a/resources/js/pages/admin/master/product/variant/edit.tsx b/resources/js/pages/admin/master/product/variant/edit.tsx
index 7929dcc..6ad9d01 100644
--- a/resources/js/pages/admin/master/product/variant/edit.tsx
+++ b/resources/js/pages/admin/master/product/variant/edit.tsx
@@ -1,4 +1,4 @@
-import { Form, Head } from '@inertiajs/react';
+import { Form, Head, Link } from '@inertiajs/react';
 import { ArrowLeft } from 'lucide-react';
 import { useState } from 'react';
 import { FileUploadMultiple } from '@/components/file-upload-multiple';
@@ -87,10 +87,10 @@ export default function ProductVariantEdit({ variant }: Props) {
                         Edit Varian
                     </h2>
                     <Button asChild variant="outline">
-                        <a href={productIndex.url()}>
+                        <Link href={productIndex.url()}>
                             <ArrowLeft className="h-4 w-4" />
                             Kembali
-                        </a>
+                        </Link>
                     </Button>
                 </div>
 
diff --git a/resources/js/pages/admin/master/product/variant/stock-mutations.tsx b/resources/js/pages/admin/master/product/variant/stock-mutations.tsx
index 4a6b0f1..d6d0b94 100644
--- a/resources/js/pages/admin/master/product/variant/stock-mutations.tsx
+++ b/resources/js/pages/admin/master/product/variant/stock-mutations.tsx
@@ -1,4 +1,4 @@
-import { Head } from '@inertiajs/react';
+import { Head, Link } from '@inertiajs/react';
 import {
     ArrowDown,
     ArrowLeft,
@@ -149,10 +149,10 @@ export default function StockMutationsPage({
                         </p>
                     </div>
                     <Button asChild variant="outline">
-                        <a href={productIndex.url()}>
+                        <Link href={productIndex.url()}>
                             <ArrowLeft className="h-4 w-4" />
                             Kembali
-                        </a>
+                        </Link>
                     </Button>
                 </div>
 
diff --git a/resources/js/pages/admin/master/product/variant/sub-row.tsx b/resources/js/pages/admin/master/product/variant/sub-row.tsx
index f6f44e4..0bb21fc 100644
--- a/resources/js/pages/admin/master/product/variant/sub-row.tsx
+++ b/resources/js/pages/admin/master/product/variant/sub-row.tsx
@@ -1,3 +1,4 @@
+import { router } from '@inertiajs/react';
 import { ArrowRightLeft, Pencil, ScrollText, Trash2 } from 'lucide-react';
 import { useState } from 'react';
 import { ImagePreviewButton } from '@/components/image-preview-button';
@@ -133,11 +134,12 @@ export function VariantSubRow({
                                                     <ScrollText className="h-4 w-4" />
                                                 ),
                                                 onClick: () => {
-                                                    window.location.href =
+                                                    router.visit(
                                                         stockMutations.url({
                                                             product: product.id,
                                                             variant: variant.id,
-                                                        });
+                                                        }),
+                                                    );
                                                 },
                                             },
                                             {
diff --git a/resources/js/pages/admin/master/raw-material/create.tsx b/resources/js/pages/admin/master/raw-material/create.tsx
index e80156d..617592c 100644
--- a/resources/js/pages/admin/master/raw-material/create.tsx
+++ b/resources/js/pages/admin/master/raw-material/create.tsx
@@ -1,4 +1,4 @@
-import { Form, Head, usePage } from '@inertiajs/react';
+import { Form, Head, Link, usePage } from '@inertiajs/react';
 import {
     ArrowLeft,
     Check,
@@ -193,10 +193,10 @@ export default function RawMaterialCreate() {
                         Tambah Bahan Baku
                     </h2>
                     <Button asChild variant="outline">
-                        <a href={rawMaterialIndex.url()}>
+                        <Link href={rawMaterialIndex.url()}>
                             <ArrowLeft className="h-4 w-4" />
                             Kembali
-                        </a>
+                        </Link>
                     </Button>
                 </div>
 
diff --git a/resources/js/pages/admin/master/raw-material/edit.tsx b/resources/js/pages/admin/master/raw-material/edit.tsx
index 5e66535..2a9a82f 100644
--- a/resources/js/pages/admin/master/raw-material/edit.tsx
+++ b/resources/js/pages/admin/master/raw-material/edit.tsx
@@ -1,4 +1,4 @@
-import { Form, Head, usePage } from '@inertiajs/react';
+import { Form, Head, Link, usePage } from '@inertiajs/react';
 import {
     ArrowLeft,
     Check,
@@ -208,10 +208,10 @@ export default function RawMaterialEdit({ rawMaterial }: Props) {
                         Edit Bahan Baku
                     </h2>
                     <Button asChild variant="outline">
-                        <a href={rawMaterialIndex.url()}>
+                        <Link href={rawMaterialIndex.url()}>
                             <ArrowLeft className="h-4 w-4" />
                             Kembali
-                        </a>
+                        </Link>
                     </Button>
                 </div>
 
diff --git a/resources/js/pages/admin/master/raw-material/index.tsx b/resources/js/pages/admin/master/raw-material/index.tsx
index a0f4f67..6478119 100644
--- a/resources/js/pages/admin/master/raw-material/index.tsx
+++ b/resources/js/pages/admin/master/raw-material/index.tsx
@@ -1,6 +1,4 @@
-import { Head, router } from '@inertiajs/react';
-import { Plus } from 'lucide-react';
-import { useState } from 'react';
+import { router } from '@inertiajs/react';
 import { CardTable } from '@/components/card-table';
 import { DeleteConfirmDialog } from '@/components/delete-confirm-dialog';
 import { FilterPopover } from '@/components/filter-popover';
@@ -18,14 +16,16 @@ import { useServerTable } from '@/hooks/use-server-table';
 import {
     destroy,
     create as rawMaterialCreate,
-    index as rawMaterialIndex,
     edit as rawMaterialEdit,
+    index as rawMaterialIndex,
     toggleStatus,
 } from '@/routes/admin/master/raw-materials';
 import {
-    destroy as variantDestroy,
-    edit as variantEdit,
+    destroy as variantDestroy
 } from '@/routes/admin/master/raw-materials/variants';
+import { Head, Link, router } from '@inertiajs/react';
+import { Plus } from 'lucide-react';
+import { useState } from 'react';
 import type { RawMaterial, RawMaterialVariant } from './columns';
 import { RawMaterialCardRow } from './raw-material-card';
 import { RawMaterialVariantSubRow } from './variant/sub-row';
@@ -155,12 +155,12 @@ export default function RawMaterialIndex({ rawMaterials, filters }: Props) {
                 <PageHeader
                     title="Bahan Baku"
                     actions={
-                        <Button asChild>
-                            <a href={rawMaterialCreate.url()}>
+                        <Link href={rawMaterialCreate.url()}>
+                            <Button>
                                 <Plus className="h-4 w-4" />
                                 Tambah
-                            </a>
-                        </Button>
+                            </Button>
+                        </Link>
                     }
                 />
 
@@ -186,16 +186,14 @@ export default function RawMaterialIndex({ rawMaterials, filters }: Props) {
                             rawMaterial={item}
                             index={
                                 (pagination.current_page - 1) *
-                                    pagination.per_page +
+                                pagination.per_page +
                                 index +
                                 1
                             }
                             isExpanded={isExpanded}
                             onToggleExpand={onToggleExpand}
                             onEdit={(rm) => {
-                                window.location.href = rawMaterialEdit.url(
-                                    rm.id,
-                                );
+                                router.visit(rawMaterialEdit.url(rm.id));
                             }}
                             onDelete={(rm) => setDeleting(rm)}
                             toggleStatusUrl={(id) => toggleStatus.url(id)}
diff --git a/resources/js/pages/admin/master/raw-material/variant/edit.tsx b/resources/js/pages/admin/master/raw-material/variant/edit.tsx
index 41d5e6e..d746953 100644
--- a/resources/js/pages/admin/master/raw-material/variant/edit.tsx
+++ b/resources/js/pages/admin/master/raw-material/variant/edit.tsx
@@ -1,4 +1,4 @@
-import { Form, Head } from '@inertiajs/react';
+import { Form, Head, Link } from '@inertiajs/react';
 import { ArrowLeft } from 'lucide-react';
 import { useState } from 'react';
 import { FileUpload } from '@/components/file-upload';
@@ -51,10 +51,10 @@ export default function RawMaterialVariantEdit({ variant }: Props) {
                         Edit Varian
                     </h2>
                     <Button asChild variant="outline">
-                        <a href={rawMaterialIndex.url()}>
+                        <Link href={rawMaterialIndex.url()}>
                             <ArrowLeft className="h-4 w-4" />
                             Kembali
-                        </a>
+                        </Link>
                     </Button>
                 </div>
 
diff --git a/resources/js/pages/admin/master/raw-material/variant/sub-row.tsx b/resources/js/pages/admin/master/raw-material/variant/sub-row.tsx
index d23ebe0..00aa25b 100644
--- a/resources/js/pages/admin/master/raw-material/variant/sub-row.tsx
+++ b/resources/js/pages/admin/master/raw-material/variant/sub-row.tsx
@@ -108,12 +108,13 @@ export function RawMaterialVariantSubRow({
                                                     <Pencil className="h-4 w-4" />
                                                 ),
                                                 onClick: () => {
-                                                    window.location.href =
+                                                    router.visit(
                                                         variantEdit.url({
                                                             rawMaterial:
                                                                 rawMaterial.id,
                                                             variant: variant.id,
-                                                        });
+                                                        }),
+                                                    );
                                                 },
                                             },
                                             {
diff --git a/resources/js/pages/admin/roles/create.tsx b/resources/js/pages/admin/roles/create.tsx
index c67d9f3..5d0f477 100644
--- a/resources/js/pages/admin/roles/create.tsx
+++ b/resources/js/pages/admin/roles/create.tsx
@@ -1,4 +1,4 @@
-import { Form, Head } from '@inertiajs/react';
+import { Form, Head, Link } from '@inertiajs/react';
 import { ArrowLeft } from 'lucide-react';
 import InputError from '@/components/input-error';
 import { Button } from '@/components/ui/button';
@@ -70,10 +70,10 @@ export default function RoleCreate({ permissions }: Props) {
                         </h2>
                     </div>
                     <Button asChild variant="outline">
-                        <a href={rolesIndex.url()}>
+                        <Link href={rolesIndex.url()}>
                             <ArrowLeft className="h-4 w-4" />
                             Kembali
-                        </a>
+                        </Link>
                     </Button>
                 </div>
 
diff --git a/resources/js/pages/admin/roles/edit.tsx b/resources/js/pages/admin/roles/edit.tsx
index eeeb977..27eacd0 100644
--- a/resources/js/pages/admin/roles/edit.tsx
+++ b/resources/js/pages/admin/roles/edit.tsx
@@ -1,4 +1,4 @@
-import { Form, Head } from '@inertiajs/react';
+import { Form, Head, Link } from '@inertiajs/react';
 import { ArrowLeft } from 'lucide-react';
 import InputError from '@/components/input-error';
 import { Button } from '@/components/ui/button';
@@ -82,10 +82,10 @@ export default function RoleEdit({ role, permissions }: Props) {
                         </h2>
                     </div>
                     <Button asChild variant="outline">
-                        <a href={rolesIndex.url()}>
+                        <Link href={rolesIndex.url()}>
                             <ArrowLeft className="h-4 w-4" />
                             Kembali
-                        </a>
+                        </Link>
                     </Button>
                 </div>
 
diff --git a/resources/js/pages/admin/roles/index.tsx b/resources/js/pages/admin/roles/index.tsx
index 7d3f884..42f0558 100644
--- a/resources/js/pages/admin/roles/index.tsx
+++ b/resources/js/pages/admin/roles/index.tsx
@@ -1,4 +1,4 @@
-import { Head, router } from '@inertiajs/react';
+import { Head, Link, router } from '@inertiajs/react';
 import { Plus } from 'lucide-react';
 import { useState } from 'react';
 import type { PaginationState } from '@/components/data-table';
@@ -58,7 +58,7 @@ export default function RoleIndex({ roles }: Props) {
 
     const columns = createRoleColumns({
         handleEdit: (role) => {
-            window.location.href = roleEdit.url(role.id);
+            router.visit(roleEdit.url(role.id));
         },
         handleDeleteClick: (role) => setDeleting(role),
     });
@@ -72,10 +72,10 @@ export default function RoleIndex({ roles }: Props) {
                     title="Role & Permission"
                     actions={
                         <Button asChild>
-                            <a href={roleCreate.url()}>
+                            <Link href={roleCreate.url()}>
                                 <Plus className="h-4 w-4" />
                                 Tambah
-                            </a>
+                            </Link>
                         </Button>
                     }
                 />