staff update

resources/views/admin/account.blade.php

@@ -1040,7 +1040,9 @@ tr:hover td{ background:#fbfdff; }
             </div>
 
             <!-- Create Installment Button -->
-            <button class="btn" id="openCreateModalBtn">+ Create New Installment</button>
+             @can('account.create_order')
+            <button class="btn" id="openCreateModalBtn">+ Create New Order</button>
+            @endcan
 
             <!-- Date Filters -->
             <div class="combined-filters-row">
@@ -1250,7 +1252,7 @@ tr:hover td{ background:#fbfdff; }
 
             <div class="create-actions">
                 <button type="button" class="btn ghost" id="cancelCreateModal">Cancel</button>
-                <button type="submit" class="btn">Create Installment</button>
+                <button type="submit" class="btn">Create Order</button>
             </div>
         </form>
     </div>
@@ -1304,7 +1306,9 @@ tr:hover td{ background:#fbfdff; }
 
         <div style="display:flex; justify-content: flex-end; gap:12px; margin-top:16px;">
             <button type="button" class="btn ghost" onclick="closeEntryDetailsModal()">Close</button>
+            @can('account.add_installment')
             <button type="button" class="btn" id="addInstallmentFromDetails">+ Add New Installment</button>
+            @endcan
         </div>
     </div>
 </div>
@@ -1388,7 +1392,9 @@ tr:hover td{ background:#fbfdff; }
 
             <div style="display:flex; justify-content:flex-end; gap:12px; margin-top:14px;">
                 <button type="button" class="btn ghost" onclick="closeInstallmentModal()">Cancel</button>
-                <button type="submit" class="btn">Create Installment</button>
+                @can('account.add_installment')
+                <button type="submit" class="btn">Create Installment2</button>
+                @endcan
             </div>
         </form>
     </div>
@@ -1559,6 +1565,14 @@ tr:hover td{ background:#fbfdff; }
     </div>
 </div>
 
+<script>
+    window.CAN_EDIT_ORDER   = @json(auth()->user()->can('account.edit_order'));
+    window.CAN_DELETE_ORDER = @json(auth()->user()->can('account.delete_order'));
+    window.CAN_TOGGLE_PAYMENT = @json(auth()->user()->can('account.toggle_payment_status'));
+</script>
+
+
+
 <script>
 /* ---------- Helpers & state ---------- */
 
@@ -1642,7 +1656,12 @@ window.addEventListener('DOMContentLoaded', () => {
 /* ---------- UI binding ---------- */
 function bindUI(){
   // Create Order Modal
-  document.getElementById('openCreateModalBtn').addEventListener('click', openCreateOrderModal);
+  //document.getElementById('openCreateModalBtn').addEventListener('click', openCreateOrderModal);
+  const createBtn = document.getElementById('openCreateModalBtn');
+if (createBtn) {
+    createBtn.addEventListener('click', openCreateOrderModal);
+}
+
   document.getElementById('closeCreateModal').addEventListener('click', closeCreateOrderModal);
   document.getElementById('cancelCreateModal').addEventListener('click', closeCreateOrderModal);
   document.getElementById('createOrderInlineForm').addEventListener('submit', submitCreateOrderInline);
@@ -1667,11 +1686,22 @@ function bindUI(){
     clearStatusFilters();
   });
   document.getElementById('searchBtn').addEventListener('click', handleSearch);
-  document.getElementById('addInstallmentFromDetails').addEventListener('click', () => {
-    if(!currentEntry) return;
-    openInstallmentModal(currentEntry.entry_no, currentEntry.description, currentEntry.region, currentEntry.pending_amount);
-    closeEntryDetailsModal();
-  });
+
+const addInstallBtn = document.getElementById('addInstallmentFromDetails');
+
+if (addInstallBtn) {
+    addInstallBtn.addEventListener('click', () => {
+        if (!currentEntry) return;
+        openInstallmentModal(
+            currentEntry.entry_no,
+            currentEntry.description,
+            currentEntry.region,
+            currentEntry.pending_amount
+        );
+        closeEntryDetailsModal();
+    });
+}
+
 
   // Installment form submit
   document.getElementById('installmentForm').addEventListener('submit', submitInstallment);
@@ -2120,103 +2150,108 @@ function renderPaymentTable(list){
     body.innerHTML = '';
     
     if (!list || list.length === 0) {
-      body.innerHTML = '<tr><td colspan="9" class="empty-state">No entries found</td></tr>';
-      return;
+        body.innerHTML = '<tr><td colspan="9" class="empty-state">No entries found</td></tr>';
+        return;
     }
-    
+
     const startIndex = (currentPage - 1) * entriesPerPage;
     const endIndex   = startIndex + entriesPerPage;
     const paginatedEntries = list.slice(startIndex, endIndex);
-    
+
     paginatedEntries.forEach(entry => {
-      const tr = document.createElement('tr');
-  
-      // फक्त unpaid/pending वरच actions दिसतील
-      const canActions = ['unpaid', 'pending'].includes(
-        String(entry.payment_status).toLowerCase()
-      );
-  
-      tr.innerHTML = `
-  <td>${escapeHtml(entry.entry_no)}</td>
-  <td>${escapeHtml(entry.entry_date)}</td>
-  <td>${escapeHtml(entry.description)}</td>
 
-  <!-- CLICKABLE ORDER QUANTITY -->
-  <td>
-    <button
-      type="button"
-      class="entry-link"
-      onclick="openEntryOrdersModal('${escapeHtml(entry.entry_no)}')"
-    >
-      ${entry.order_quantity ?? '-'}
-    </button>
-  </td>
+        const tr = document.createElement('tr');
 
-  <td>${escapeHtml(entry.region)}</td>
-  <td>
-    <button class="toggle-switch-btn"
-            data-entry="${escapeHtml(entry.entry_no)}"
-            data-pos="${Number(entry.toggle_pos) || 0}"
-            aria-label="Toggle payment state"></button>
-  </td>
-  <td>${formatCurrency(entry.amount)}</td>
-  <td>
-    <span class="status-badge ${statusClass(entry.payment_status)}">
-      ${capitalize(entry.payment_status)}
-    </span>
-  </td>
+        const canActions = ['unpaid','pending'].includes(entry.payment_status.toLowerCase());
 
-  <!-- इथे तुझा action-btns block paste कर -->
-  <td>
-    <div class="action-btns">
-      ${canActions ? `
-      <button class="action-btn edit-btn" data-entry="${escapeHtml(entry.entry_no)}" title="Edit entry">
-        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path d="M11.3333 1.99996C11.5084 1.82485 11.7163 1.686 11.945 1.59124C12.1737 1.49649 12.4189 1.44775 12.6667 1.44775C12.9144 1.44775 13.1596 1.49649 13.3883 1.59124C13.617 1.686 13.8249 1.82485 14 1.99996C14.1751 2.17507 14.314 2.38297 14.4087 2.61167C14.5035 2.84037 14.5522 3.08556 14.5522 3.33329C14.5522 3.58102 14.5035 3.82621 14.4087 4.05491C14.314 4.28361 14.1751 4.49151 14 4.66663L4.99998 13.6666L1.33331 14.6666L2.33331 11L11.3333 1.99996Z"
-                stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-        </svg>
-      </button>
-      <button class="action-btn delete-btn" data-entry="${escapeHtml(entry.entry_no)}" title="Delete entry">
-        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path d="M2 4H3.33333H14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-          <path d="M5.33331 4V2.66667C5.33331 2.31305 5.47379 1.97391 5.72384 1.72386C5.97389 1.47381 6.31303 1.33333 6.66665 1.33333H9.33331C9.68693 1.33333 10.0261 1.47381 10.2761 1.72386C10.5262 1.97391 10.6666 2.31305 10.6666 2.66667V4M12.6666 4V13.3333C12.6666 13.6869 12.5262 14.0261 12.2761 14.2761C12.0261 14.5262 11.6869 14.6667 11.3333 14.6667H4.66665C4.31303 14.6667 3.97389 14.5262 3.72384 14.2761C3.47379 14.0261 3.33331 13.6869 3.33331 13.3333V4H12.6666Z"
-                stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-        </svg>
-      </button>
-      ` : ''}
-    </div>
-  </td>
-`;
+        // permissions passed from Blade
+        const canEdit   = window.CAN_EDIT_ORDER;
+        const canDelete = window.CAN_DELETE_ORDER;
+        const canToggle = window.CAN_TOGGLE_PAYMENT;
 
+        tr.innerHTML = `
+            <td>${escapeHtml(entry.entry_no)}</td>
+            <td>${escapeHtml(entry.entry_date)}</td>
+            <td>${escapeHtml(entry.description)}</td>
 
-      body.appendChild(tr);
-      const btn = tr.querySelector('.toggle-switch-btn');
-btn.dataset.entry = entry.entry_no;              // entry_no from API
-btn.dataset.pos = entry.toggle_pos ?? 0;
-setToggleVisual(btn, Number(btn.dataset.pos));
-btn.addEventListener('click', () => cycleToggle(btn));
+            <td>
+                <button type="button" class="entry-link"
+                        onclick="openEntryOrdersModal('${escapeHtml(entry.entry_no)}')">
+                    ${entry.order_quantity ?? '-'}
+                </button>
+            </td>
 
+            <td>${escapeHtml(entry.region)}</td>
 
-const actions = tr.querySelector('.action-btns');
-if (actions) {
-    if (entry.payment_status.toLowerCase() === 'paid') {
-        actions.style.display = 'none';
-    } else {
-        actions.style.display = 'flex';
-    }
+            <td>
+                <button class="toggle-switch-btn"
+                    data-entry="${entry.entry_no}"
+                    data-pos="${entry.toggle_pos ?? 0}"
+                    ${!canToggle ? 'disabled class="toggle-switch-btn disabled-toggle"' : ''}
+                ></button>
+            </td>
+
+            <td>${formatCurrency(entry.amount)}</td>
+
+            <td>
+                <span class="status-badge ${statusClass(entry.payment_status)}">
+                    ${capitalize(entry.payment_status)}
+                </span>
+            </td>
+
+            <td>
+                <div class="action-btns">
+
+                    ${(canActions && canEdit) ? `
+                        <button class="action-btn edit-btn"
+                                data-entry="${entry.entry_no}"
+                                title="Edit entry">
+                            ✎
+                        </button>
+                    ` : ''}
+
+                    ${(canActions && canDelete) ? `
+                        <button class="action-btn delete-btn"
+                                data-entry="${entry.entry_no}"
+                                title="Delete entry">
+                            🗑
+                        </button>
+                    ` : ''}
+
+                </div>
+            </td>
+        `;
+
+        /* Toggle Button Logic */
+        const toggleBtn = tr.querySelector('.toggle-switch-btn');
+        setToggleVisual(toggleBtn, Number(toggleBtn.dataset.pos));
+
+        if (canToggle) {
+            toggleBtn.addEventListener("click", () => cycleToggle(toggleBtn));
+        } else {
+            toggleBtn.style.opacity = "0.5";
+            toggleBtn.style.cursor = "not-allowed";
+        }
+
+        /* EDIT binding */
+        if (canActions && canEdit) {
+            const editBtn = tr.querySelector(".edit-btn");
+            editBtn?.addEventListener("click", () => openEditModal(entry));
+        }
+
+        /* DELETE binding */
+        if (canActions && canDelete) {
+            const delBtn = tr.querySelector(".delete-btn");
+            delBtn?.addEventListener("click", () => deleteEntry(entry.entry_no));
+        }
+
+        body.appendChild(tr);
+    });
 }
 
 
-  
-      if (canActions) {
-        const editBtn = tr.querySelector('.edit-btn');
-        editBtn.addEventListener('click', () => openEditModal(entry));
-  
-        const deleteBtn = tr.querySelector('.delete-btn');
-        deleteBtn.addEventListener('click', () => deleteEntry(entry.entry_no));
-      }
-    });
-  }
+
+
   function cycleToggle(btn) {
     // वर्तमान position घेऊन पुढचा स्टेट कॅल्क्युलेट करा
     let pos = parseInt(btn.dataset.pos || '0', 10);   // 0 = unpaid, 1 = pending, 2 = paid
@@ -2838,30 +2873,30 @@ async function openEntryDetailsModal(entryNo) {
                 <td>${formatCurrency(ins.amount)}</td>
 
                 <td>
-                <select class="installment-status-dropdown"
-        data-id="${ins.id}"
-        onchange="updateInstallmentStatus(${ins.id}, this.value)">
-    <option value="Pending" ${ins.status === 'Pending' ? 'selected' : ''} 
-            style="color: #f59e0b; font-weight: 500; padding: 10px;">
-        ⏳ Pending
-    </option>
-    <option value="Loading" ${ins.status === 'Loading' ? 'selected' : ''} 
-            style="color: #3b82f6; font-weight: 500; padding: 10px;">
-        📦 Loading
-    </option>
-    <option value="Packed" ${ins.status === 'Packed' ? 'selected' : ''} 
-            style="color: #8b5cf6; font-weight: 500; padding: 10px;">
-        📦 Packed
-    </option>
-    <option value="Dispatched" ${ins.status === 'Dispatched' ? 'selected' : ''} 
-            style="color: #10b981; font-weight: 500; padding: 10px;">
-        🚚 Dispatched
-    </option>
-    <option value="Delivered" ${ins.status === 'Delivered' ? 'selected' : ''} 
-            style="color: #0c6b2e; font-weight: 500; padding: 10px;">
-        ✅ Delivered
-    </option>
-</select>
+                    <select class="installment-status-dropdown"
+                        data-id="${ins.id}"
+                        onchange="updateInstallmentStatus(${ins.id}, this.value)">
+                            <option value="Pending" ${ins.status === 'Pending' ? 'selected' : ''} 
+                                    style="color: #f59e0b; font-weight: 500; padding: 10px;">
+                                ⏳ Pending
+                            </option>
+                            <option value="Loading" ${ins.status === 'Loading' ? 'selected' : ''} 
+                                    style="color: #3b82f6; font-weight: 500; padding: 10px;">
+                                📦 Loading
+                            </option>
+                            <option value="Packed" ${ins.status === 'Packed' ? 'selected' : ''} 
+                                    style="color: #8b5cf6; font-weight: 500; padding: 10px;">
+                                📦 Packed
+                            </option>
+                            <option value="Dispatched" ${ins.status === 'Dispatched' ? 'selected' : ''} 
+                                    style="color: #10b981; font-weight: 500; padding: 10px;">
+                                🚚 Dispatched
+                            </option>
+                            <option value="Delivered" ${ins.status === 'Delivered' ? 'selected' : ''} 
+                                    style="color: #0c6b2e; font-weight: 500; padding: 10px;">
+                                ✅ Delivered
+                            </option>
+                    </select>
 
                 </td>
             `;

resources/views/admin/customers.blade.php

@@ -809,9 +809,11 @@
                     All
                 </a>
 
+                @can('customer.create')
                 <a href="{{ route('admin.customers.add') }}" class="add-customer-btn">
                     <i class="bi bi-plus-circle me-1"></i>Add Customer
                 </a>
+                @endcan
             </div>
         </div>
     </div>

resources/views/admin/dashboard.blade.php

@@ -1131,9 +1131,12 @@ body, .container-fluid {
   <div class="order-mgmt-box">
     <div class="order-mgmt-bar">
       <span class="order-mgmt-title"><i class="bi bi-table"></i> Order Management</span>
-      <button class="create-order-btn" id="openCreateOrderModal">
-        <i class="bi bi-plus-circle"></i> Create Order
-      </button>
+      @can('order.create')
+        <button class="create-order-btn" id="openCreateOrderModal">
+          <i class="bi bi-plus-circle"></i> Create Order
+        </button>
+      @endcan
+
     </div>
 
     <div class="order-mgmt-main">

resources/views/admin/invoice_edit.blade.php

@@ -452,9 +452,11 @@ body {
                 </div>
 
                 <div class="text-end mt-3">
+                    @can('invoice.edit')
                     <button type="submit" class="btn-success-compact btn-compact">
                         <i class="fas fa-save me-2"></i>Update Invoice
                     </button>
+                    @endcan
                 </div>
             </form>
         </div>
@@ -541,11 +543,13 @@ body {
             <h4>
                 <i class="fas fa-credit-card me-2"></i>Installment Payments
             </h4>
-            @if($remaining > 0)
-            <button id="toggleInstallmentForm" class="btn-primary-compact btn-compact">
-    <i class="fas fa-plus-circle me-2"></i>Add Installment
-</button>
-            @endif
+            @can('invoice.add_installment')
+                @if($remaining > 0)
+                <button id="toggleInstallmentForm" class="btn-primary-compact btn-compact">
+                    <i class="fas fa-plus-circle me-2"></i>Add Installment
+                </button>
+                @endif
+            @endcan
         </div>
 
         <div class="card-body-compact">

resources/views/admin/layouts/app.blade.php

@@ -228,44 +228,86 @@
       <div class="word"><strong>KENT</strong><br /><small>International Pvt. Ltd.</small></div>
     </div>
 
-    <a href="{{ route('admin.dashboard') }}" class="{{ request()->routeIs('admin.dashboard') ? 'active' : '' }}"><i class="bi bi-house"></i> Dashboard</a>
-    <a href="{{ route('admin.shipments') }}" class="{{ request()->routeIs('admin.shipments') ? 'active' : '' }}"><i class="bi bi-truck"></i> Shipments</a>
-   <a href="{{ route('admin.invoices.index') }}" 
-      class="{{ request()->routeIs('admin.invoices.index') ? 'active' : '' }}">
+    {{-- Dashboard (requires order.view) --}}
+    @can('order.view')
+    <a href="{{ route('admin.dashboard') }}" class="{{ request()->routeIs('admin.dashboard') ? 'active' : '' }}">
+      <i class="bi bi-house"></i> Dashboard
+    </a>
+    @endcan
+
+    {{-- Shipments --}}
+    @can('shipment.view')
+    <a href="{{ route('admin.shipments') }}" class="{{ request()->routeIs('admin.shipments') ? 'active' : '' }}">
+      <i class="bi bi-truck"></i> Shipments
+    </a>
+    @endcan
+
+    {{-- Invoice --}}
+    @can('invoice.view')
+    <a href="{{ route('admin.invoices.index') }}" class="{{ request()->routeIs('admin.invoices.index') ? 'active' : '' }}">
       <i class="bi bi-receipt"></i> Invoice
     </a>
+    @endcan
 
-    <a href="{{ route('admin.customers.index') }}" 
-      class="{{ request()->routeIs('admin.customers.index') ? 'active' : '' }}">
+    {{-- Customers --}}
+    @can('customer.view')
+    <a href="{{ route('admin.customers.index') }}" class="{{ request()->routeIs('admin.customers.index') ? 'active' : '' }}">
       <i class="bi bi-people"></i> Customers
     </a>
+    @endcan
 
-    <a href="{{ route('admin.reports') }}" 
-      class="{{ request()->routeIs('admin.reports') ? 'active' : '' }}">
+    {{-- Reports --}}
+    @can('report.view')
+    <a href="{{ route('admin.reports') }}" class="{{ request()->routeIs('admin.reports') ? 'active' : '' }}">
       <i class="bi bi-graph-up"></i> Reports
     </a>
+    @endcan
 
-
-        <a href="{{ route('admin.chat_support') }}" class="{{ request()->routeIs('admin.chat_support') ? 'active' : '' }}"><i class="bi bi-chat-dots"></i> Chat Support</a>
-<!-- <a href="{{ route('admin.orders.index') }}" 
-   class="{{ request()->routeIs('admin.orders.*') ? 'active' : '' }}">
-   <i class="bi bi-bag"></i> Orders
-</a> -->
-<a href="{{ route('admin.orders') }}"
-   class="{{ request()->routeIs('admin.orders') ? 'active' : '' }}">
-   <i class="bi bi-bag"></i> Orders
-</a>
-<a href="{{ route('admin.requests') }}" class="{{ request()->routeIs('admin.requests') ? 'active' : '' }}"><i class="bi bi-envelope"></i> Requests</a>
-<li>
-    <a href="{{ route('admin.profile.requests') }}">
-        <i class="bi bi-person-lines-fill"></i>
-        Profile Update Requests
+    {{-- Chat Support (NO PERMISSION REQUIRED) --}}
+    <a href="{{ route('admin.chat_support') }}" class="{{ request()->routeIs('admin.chat_support') ? 'active' : '' }}">
+      <i class="bi bi-chat-dots"></i> Chat Support
     </a>
-</li>
 
-    <a href="{{ route('admin.staff') }}" class="{{ request()->routeIs('admin.staff') ? 'active' : '' }}"><i class="bi bi-person-badge"></i> Staff</a>
-    <a href="{{ route('admin.account') }}" class="{{ request()->routeIs('admin.account') ? 'active' : '' }}"><i class="bi bi-gear"></i> Account</a>
-    <a href="{{ route('admin.marklist.index') }}" class="{{ request()->routeIs('admin.marklist.index') ? 'active' : '' }}"><i class="bi bi-list-check"></i> Mark List</a>
+    {{-- Orders --}}
+    @can('orders.view')
+    <a href="{{ route('admin.orders') }}" class="{{ request()->routeIs('admin.orders') ? 'active' : '' }}">
+      <i class="bi bi-bag"></i> Orders
+    </a>
+    @endcan
+
+    {{-- Requests --}}
+    @can('request.view')
+    <a href="{{ route('admin.requests') }}" class="{{ request()->routeIs('admin.requests') ? 'active' : '' }}">
+      <i class="bi bi-envelope"></i> Requests
+    </a>
+    @endcan
+
+    {{-- Profile Update Requests --}}
+    @can('request.update_profile')
+    <a href="{{ route('admin.profile.requests') }}">
+      <i class="bi bi-person-lines-fill"></i> Profile Update Requests
+    </a>
+    @endcan
+
+    {{-- Staff (NO PERMISSION REQUIRED) --}}
+    <a href="{{ route('admin.staff.index') }}" class="{{ request()->routeIs('admin.staff.*') ? 'active' : '' }}">
+      <i class="bi bi-person-badge"></i> Staff
+    </a>
+
+    {{-- Account Section --}}
+    @can('account.view')
+    <a href="{{ route('admin.account') }}" class="{{ request()->routeIs('admin.account') ? 'active' : '' }}">
+      <i class="bi bi-gear"></i> Account
+    </a>
+    @endcan
+
+    {{-- Mark List --}}
+    @can('mark_list.view')
+    <a href="{{ route('admin.marklist.index') }}" class="{{ request()->routeIs('admin.marklist.index') ? 'active' : '' }}">
+      <i class="bi bi-list-check"></i> Mark List
+    </a>
+    @endcan
+  
   </div>
 
   <div class="main-content">

resources/views/admin/login.blade.php

@@ -120,19 +120,33 @@
             @endif
 
             <form method="POST" action="{{ route('admin.login.submit') }}">
-                @csrf
-                <div class="mb-3">
-                    <label>Email</label>
-                    <input type="email" name="email" class="form-control" value="{{ old('email') }}" required>
-                </div>
+    @csrf
 
-                <div class="mb-3">
-                    <label>Password</label>
-                    <input type="password" name="password" class="form-control" required>
-                </div>
+    <div class="mb-3">
+        <label>Username / Email / Employee ID</label>
+        <input 
+            type="text" 
+            name="login" 
+            class="form-control" 
+            value="{{ old('login') }}" 
+            placeholder="Enter Email or Username or EMP ID"
+            required
+        >
+    </div>
+
+    <div class="mb-3">
+        <label>Password</label>
+        <input 
+            type="password" 
+            name="password" 
+            class="form-control" 
+            required
+        >
+    </div>
+
+    <button type="submit" class="btn btn-primary w-100">Login</button>
+</form>
 
-                <button type="submit" class="btn btn-primary w-100">Login</button>
-            </form>
 
             <div class="secure-encrypted">
                 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="green" class="bi bi-lock-fill" viewBox="0 0 16 16">

resources/views/admin/orders_show.blade.php

@@ -17,9 +17,11 @@
         </div>
 
         {{-- ADD ITEM --}}
+        @can('order.create')
         <button class="btn btn-add-item" data-bs-toggle="modal" data-bs-target="#addItemModal">
           <i class="fas fa-plus-circle me-2"></i>Add New Item
         </button>
+        @endcan
 
         <a href="{{ route('admin.dashboard') }}" class="btn-close"></a>
       </div>
@@ -191,6 +193,7 @@
              <td class="d-flex justify-content-center gap-2">
 
               {{-- EDIT BUTTON --}}
+              @can('order.edit')
               <button 
                   type="button" 
                   class="btn btn-sm btn-edit-item"
@@ -198,7 +201,9 @@
                   data-bs-target="#editItemModal{{ $item->id }}">
                   <i class="fas fa-edit"></i>
               </button>
+              @endcan
 
+              @can('order.delete')
               {{-- DELETE BUTTON --}}
               <form action="{{ route('admin.orders.deleteItem', $item->id) }}"
                     method="POST"
@@ -209,6 +214,7 @@
                   <i class="fas fa-trash"></i>
                 </button>
               </form>
+              @endcan
           </td>
 
             </tr>
@@ -327,7 +333,7 @@
                       <div class="modal-footer">
                           <div class="modal-footer">
                             <button type="button" class="btn btn-modal-close" data-bs-dismiss="modal">Close</button>
-                            <button type="submit" class="btn btn-modal-add">Add Item</button>
+                            <button type="submit" class="btn btn-modal-add">Edit Item</button>
                           </div>
                       </div>
 

resources/views/admin/shipments.blade.php

@@ -322,8 +322,33 @@
     
     /* NEW: Action Button Styles */
     .action-container {
-        position: relative;
-        display: inline-block;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 8px;
+    }
+    
+    .btn-view-details {
+        background: linear-gradient(135deg, #10b981, #059669);
+        color: white;
+        border: none;
+        border-radius: 8px;
+        padding: 8px 10px;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 36px;
+        height: 36px;
+        text-decoration: none;
+    }
+    
+    .btn-view-details:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
+        background: linear-gradient(135deg, #059669, #047857);
+        color: white;
     }
     
     .btn-edit-status {
@@ -1259,33 +1284,46 @@
                             <td>{{ \Carbon\Carbon::parse($ship->shipment_date)->format('d M Y') }}</td>
                             <td>
                                 <div class="action-container">
-                                    <button type="button" class="btn-edit-status" onclick="toggleStatusDropdown(this, {{ $ship->id }})" title="Edit Status">
+                                    <!-- 👁️ View Icon -->
+                                    <!-- <a href="{{ route('admin.shipment.view', $ship->id) }}" 
+                                       class="btn-view-details" 
+                                       title="View Shipment">
+                                        <i class="bi bi-eye"></i>
+                                    </a> -->
+
+                                    <!-- ✏️ Edit Status Icon -->
+                                    <button type="button" class="btn-edit-status" 
+                                            onclick="toggleStatusDropdown(this, {{ $ship->id }})" 
+                                            title="Edit Status">
                                         <i class="bi bi-pencil"></i>
                                     </button>
+
+                                    <!-- Dropdown -->
                                     <div class="status-dropdown" id="statusDropdown-{{ $ship->id }}">
                                         <form action="{{ route('admin.shipments.updateStatus') }}" method="POST" class="status-form">
                                             @csrf
                                             <input type="hidden" name="shipment_id" value="{{ $ship->id }}">
+
                                             <button type="submit" name="status" value="pending" class="status-option pending">
-                                                <span class="status-indicator pending"></span>
-                                                Pending
+                                                <span class="status-indicator pending"></span> Pending
                                             </button>
+
                                             <button type="submit" name="status" value="in_transit" class="status-option in_transit">
-                                                <span class="status-indicator in_transit"></span>
-                                                In Transit
+                                                <span class="status-indicator in_transit"></span> In Transit
                                             </button>
+
                                             <button type="submit" name="status" value="dispatched" class="status-option dispatched">
-                                                <span class="status-indicator dispatched"></span>
-                                                Dispatched
+                                                <span class="status-indicator dispatched"></span> Dispatched
                                             </button>
+
                                             <button type="submit" name="status" value="delivered" class="status-option delivered">
-                                                <span class="status-indicator delivered"></span>
-                                                Delivered
+                                                <span class="status-indicator delivered"></span> Delivered
                                             </button>
                                         </form>
                                     </div>
                                 </div>
                             </td>
+
                         </tr>
                         @empty
                         <tr>
@@ -1550,6 +1588,9 @@ function renderTable() {
             <td>${new Date(shipment.shipment_date).toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' })}</td>
             <td>
                 <div class="action-container">
+                    <a href="/admin/dashboard/${shipment.id}" class="btn-view-details" title="View Shipment">
+                        <i class="bi bi-eye"></i>
+                    </a>
                     <button type="button" class="btn-edit-status" onclick="toggleStatusDropdown(this, ${shipment.id})" title="Edit Status">
                         <i class="bi bi-pencil"></i>
                     </button>

resources/views/admin/staff/create.blade.php

@@ -0,0 +1,187 @@
+@extends('admin.layouts.app')
+
+@section('page-title', 'Account Dashboard')
+
+@section('content')
+<style>
+  .card { background:#fff; border:1px solid #eaeaea; padding:1rem; border-radius:6px; }
+  .field { margin-bottom:.8rem; }
+  label { display:block; font-weight:600; margin-bottom:.25rem; }
+  input[type="text"], input[type="email"], input[type="date"], input[type="password"], textarea, select {
+    width:100%; padding:.5rem; border:1px solid #ddd; border-radius:4px;
+  }
+  .stages { display:flex; gap:.5rem; margin-bottom:1rem; }
+  .stage-ind { padding:.35rem .6rem; border-radius:4px; background:#f3f3f3; }
+  .stage { display:none; }
+  .stage.active { display:block; }
+  .btn { padding:.5rem .8rem; border-radius:5px; border:1px solid #ccc; background:#f6f6f6; cursor:pointer; }
+  .btn.primary { background:#0b74de; color:#fff; border-color:#0b74de; }
+  .perm-group { border:1px dashed #eee; padding:.6rem; margin-bottom:.6rem; border-radius:4px; }
+  .perm-list { display:flex; flex-wrap:wrap; gap:.5rem; }
+  .perm-item { min-width:200px; }
+  .error { color:#b00020; font-size:.95rem; margin-top:.25rem; }
+</style>
+
+<div class="card">
+  <h3>Add Staff</h3>
+
+  @if($errors->any())
+    <div style="background:#fff0f0; padding:.6rem; border:1px solid #f3c6c6; margin-bottom:1rem;">
+      <strong>There were some problems with your input:</strong>
+      <ul>
+        @foreach($errors->all() as $err)
+          <li>{{ $err }}</li>
+        @endforeach
+      </ul>
+    </div>
+  @endif
+
+  <form method="POST" action="{{ route('admin.staff.store') }}">
+    @csrf
+
+    <div class="stages">
+      <div class="stage-ind">1. Personal</div>
+      <div class="stage-ind">2. Professional</div>
+      <div class="stage-ind">3. System</div>
+      <div class="stage-ind">4. Permissions</div>
+    </div>
+
+    {{-- Stage 1 --}}
+    <div id="stage-1" class="stage active">
+      <div class="field">
+        <label>Name *</label>
+        <input type="text" name="name" value="{{ old('name') }}" required>
+      </div>
+
+      <div class="field">
+        <label>Email *</label>
+        <input type="email" name="email" value="{{ old('email') }}" required>
+      </div>
+
+      <div class="field">
+        <label>Phone *</label>
+        <input type="text" name="phone" value="{{ old('phone') }}" required>
+      </div>
+
+      <div class="field">
+        <label>Emergency Phone</label>
+        <input type="text" name="emergency_phone" value="{{ old('emergency_phone') }}">
+      </div>
+
+      <div class="field">
+        <label>Address</label>
+        <textarea name="address" rows="3">{{ old('address') }}</textarea>
+      </div>
+
+      <div style="display:flex; justify-content:flex-end; gap:.5rem;">
+        <button type="button" class="btn" onclick="showStage(2)">Next</button>
+      </div>
+    </div>
+
+    {{-- Stage 2 --}}
+    <div id="stage-2" class="stage">
+      <div class="field">
+        <label>Role (Business role)</label>
+        <input type="text" name="role" value="{{ old('role') }}">
+      </div>
+
+      <div class="field">
+        <label>Department</label>
+        <input type="text" name="department" value="{{ old('department') }}">
+      </div>
+
+      <div class="field">
+        <label>Designation</label>
+        <input type="text" name="designation" value="{{ old('designation') }}">
+      </div>
+
+      <div class="field">
+        <label>Joining Date</label>
+        <input type="date" name="joining_date" value="{{ old('joining_date') }}">
+      </div>
+
+      <div class="field">
+        <label>Status</label>
+        <select name="status">
+          <option value="active" {{ old('status')=='active'?'selected':'' }}>Active</option>
+          <option value="inactive" {{ old('status')=='inactive'?'selected':'' }}>Inactive</option>
+        </select>
+      </div>
+
+      <div class="field">
+        <label>Additional Info</label>
+        <textarea name="additional_info" rows="3">{{ old('additional_info') }}</textarea>
+      </div>
+
+      <div style="display:flex; justify-content:space-between; gap:.5rem;">
+        <button type="button" class="btn" onclick="showStage(1)">Back</button>
+        <button type="button" class="btn" onclick="showStage(3)">Next</button>
+      </div>
+    </div>
+
+    {{-- Stage 3 --}}
+    <div id="stage-3" class="stage">
+      <div class="field">
+        <label>Username *</label>
+        <input type="text" name="username" value="{{ old('username') }}" placeholder="leave blank to use EMPxxxx">
+        <div class="muted" style="font-size:.9rem; margin-top:.25rem;">If left blank employee id will be used.</div>
+      </div>
+
+      <div class="field">
+        <label>Password *</label>
+        <input type="password" name="password" required>
+      </div>
+
+      <div style="display:flex; justify-content:space-between; gap:.5rem;">
+        <button type="button" class="btn" onclick="showStage(2)">Back</button>
+        <button type="button" class="btn" onclick="showStage(4)">Next</button>
+      </div>
+    </div>
+
+    {{-- Stage 4 --}}
+    <div id="stage-4" class="stage">
+      <div style="margin-bottom:.5rem; font-weight:700;">Permissions</div>
+
+      @foreach($permissions as $group => $groupPerms)
+        <div class="perm-group">
+          <div style="display:flex; justify-content:space-between; align-items:center;">
+            <div style="font-weight:600;">{{ ucfirst($group) }}</div>
+            <div>
+              <button type="button" class="btn" onclick="toggleGroup('{{ $group }}')">Toggle group</button>
+            </div>
+          </div>
+
+          <div class="perm-list" id="group-{{ $group }}">
+            @foreach($groupPerms as $perm)
+              <label class="perm-item">
+                <input type="checkbox" name="permissions[]" value="{{ $perm->name }}"> {{ $perm->name }}
+              </label>
+            @endforeach
+          </div>
+        </div>
+      @endforeach
+
+      <div style="display:flex; justify-content:space-between; gap:.5rem;">
+        <button type="button" class="btn" onclick="showStage(3)">Back</button>
+        <button type="submit" class="btn primary">Create Staff</button>
+      </div>
+    </div>
+  </form>
+</div>
+
+<script>
+  function showStage(n){
+    document.querySelectorAll('.stage').forEach(s=>s.classList.remove('active'));
+    document.getElementById('stage-'+n).classList.add('active');
+    window.scrollTo({top:0, behavior:'smooth'});
+  }
+
+  function toggleGroup(group){
+    const el = document.getElementById('group-'+group);
+    if(!el) return;
+    const inputs = el.querySelectorAll('input[type="checkbox"]');
+    const anyUnchecked = Array.from(inputs).some(i => !i.checked);
+    inputs.forEach(i => i.checked = anyUnchecked);
+  }
+</script>
+@endsection

resources/views/admin/staff/edit.blade.php

@@ -0,0 +1,156 @@
+@extends('admin.layouts.app')
+
+@section('page-title', 'Account Dashboard')
+
+@section('content')
+<style>
+  .card { background:#fff; border:1px solid #eaeaea; padding:1rem; border-radius:6px; }
+  .field { margin-bottom:.8rem; }
+  label { display:block; font-weight:600; margin-bottom:.25rem; }
+  input[type="text"], input[type="email"], input[type="date"], input[type="password"], textarea, select {
+    width:100%; padding:.5rem; border:1px solid #ddd; border-radius:4px;
+  }
+  .perm-group { border:1px dashed #eee; padding:.6rem; margin-bottom:.6rem; border-radius:4px; }
+  .perm-list { display:flex; flex-wrap:wrap; gap:.5rem; }
+  .perm-item { min-width:200px; }
+  .btn { padding:.5rem .8rem; border-radius:5px; border:1px solid #ccc; background:#f6f6f6; cursor:pointer; }
+  .btn.primary { background:#0b74de; color:#fff; border-color:#0b74de; }
+</style>
+
+<div class="card">
+  <h3>Edit Staff — {{ $staff->display_name ?? $staff->name }}</h3>
+
+  @if($errors->any())
+    <div style="background:#fff0f0; padding:.6rem; border:1px solid #f3c6c6; margin-bottom:1rem;">
+      <strong>There were some problems with your input:</strong>
+      <ul>
+        @foreach($errors->all() as $err)
+          <li>{{ $err }}</li>
+        @endforeach
+      </ul>
+    </div>
+  @endif
+
+  <form method="POST" action="{{ route('admin.staff.update', $staff->id) }}">
+    @csrf
+    @method('PUT')
+
+    <div class="field">
+      <label>Employee ID</label>
+      <input type="text" value="{{ $staff->employee_id }}" disabled>
+    </div>
+
+    <div class="field">
+      <label>Name *</label>
+      <input type="text" name="name" value="{{ old('name', $staff->name) }}" required>
+    </div>
+
+    <div class="field">
+      <label>Email *</label>
+      <input type="email" name="email" value="{{ old('email', $staff->email) }}" required>
+    </div>
+
+    <div class="field">
+      <label>Phone *</label>
+      <input type="text" name="phone" value="{{ old('phone', $staff->phone) }}" required>
+    </div>
+
+    <div class="field">
+      <label>Emergency Phone</label>
+      <input type="text" name="emergency_phone" value="{{ old('emergency_phone', $staff->emergency_phone) }}">
+    </div>
+
+    <div class="field">
+      <label>Address</label>
+      <textarea name="address" rows="3">{{ old('address', $staff->address) }}</textarea>
+    </div>
+
+    <hr>
+
+    <div class="field">
+      <label>Role</label>
+      <input type="text" name="role" value="{{ old('role', $staff->role) }}">
+    </div>
+
+    <div class="field">
+      <label>Department</label>
+      <input type="text" name="department" value="{{ old('department', $staff->department) }}">
+    </div>
+
+    <div class="field">
+      <label>Designation</label>
+      <input type="text" name="designation" value="{{ old('designation', $staff->designation) }}">
+    </div>
+
+    <div class="field">
+      <label>Joining Date</label>
+      <input type="date" name="joining_date" value="{{ old('joining_date', optional($staff->joining_date)->format('Y-m-d')) }}">
+    </div>
+
+    <div class="field">
+      <label>Status</label>
+      <select name="status">
+        <option value="active" {{ old('status', $staff->status)=='active'?'selected':'' }}>Active</option>
+        <option value="inactive" {{ old('status', $staff->status)=='inactive'?'selected':'' }}>Inactive</option>
+      </select>
+    </div>
+
+    <div class="field">
+      <label>Additional Info</label>
+      <textarea name="additional_info" rows="3">{{ old('additional_info', $staff->additional_info) }}</textarea>
+    </div>
+
+    <hr>
+
+    <div class="field">
+      <label>Username *</label>
+      <input type="text" name="username" value="{{ old('username', $staff->username) }}" required>
+    </div>
+
+    <div class="field">
+      <label>New Password (leave blank to keep existing)</label>
+      <input type="password" name="password" autocomplete="new-password">
+    </div>
+
+    <hr>
+
+    <div style="margin-bottom:.5rem; font-weight:700;">Permissions</div>
+
+    @foreach($permissions as $group => $groupPerms)
+      <div class="perm-group">
+        <div style="display:flex; justify-content:space-between; align-items:center;">
+          <div style="font-weight:600;">{{ ucfirst($group) }}</div>
+          <div>
+            <button type="button" class="btn" onclick="toggleGroup('{{ $group }}')">Toggle group</button>
+          </div>
+        </div>
+
+        <div class="perm-list" id="group-{{ $group }}">
+          @foreach($groupPerms as $perm)
+            <label class="perm-item">
+              <input type="checkbox" name="permissions[]" value="{{ $perm->name }}"
+                {{ in_array($perm->name, old('permissions', $staffPermissions)) ? 'checked' : '' }}>
+              {{ $perm->name }}
+            </label>
+          @endforeach
+        </div>
+      </div>
+    @endforeach
+
+    <div style="display:flex; justify-content:flex-end; gap:.5rem;">
+      <a href="{{ route('admin.staff.index') }}" class="btn">Cancel</a>
+      <button type="submit" class="btn primary">Update Staff</button>
+    </div>
+  </form>
+</div>
+
+<script>
+  function toggleGroup(group){
+    const el = document.getElementById('group-'+group);
+    if(!el) return;
+    const inputs = el.querySelectorAll('input[type="checkbox"]');
+    const anyUnchecked = Array.from(inputs).some(i => !i.checked);
+    inputs.forEach(i => i.checked = anyUnchecked);
+  }
+</script>
+@endsection

resources/views/admin/staff/index.blade.php

@@ -0,0 +1,65 @@
+@extends('admin.layouts.app')
+
+@section('page-title', 'Account Dashboard')
+
+@section('content')
+<style>
+  .top-bar { display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; }
+  .card { background:#fff; border:1px solid #e4e4e4; border-radius:6px; padding:1rem; box-shadow:0 1px 3px rgba(0,0,0,.03); }
+  table { width:100%; border-collapse:collapse; }
+  th, td { padding:.6rem .75rem; border-bottom:1px solid #f1f1f1; text-align:left; }
+  .btn { padding:.45rem .75rem; border-radius:4px; border:1px solid #ccc; background:#f7f7f7; cursor:pointer; }
+  .btn.primary { background:#0b74de; color:#fff; border-color:#0b74de; }
+  .actions a { margin-right:.5rem; color:#0b74de; text-decoration:none; }
+  .muted { color:#666; font-size:.95rem; }
+</style>
+
+<div class="top-bar">
+  <h2>Staff</h2>
+  <a href="{{ route('admin.staff.create') }}" class="btn primary">Add Staff</a>
+</div>
+
+<div class="card">
+  @if(session('success'))
+    <div style="padding:.5rem; background:#e6ffed; border:1px solid #b6f0c6; margin-bottom:1rem;">{{ session('success') }}</div>
+  @endif
+
+  <table>
+    <thead>
+      <tr>
+        <th>#</th>
+        <th>Employee ID</th>
+        <th>Name</th>
+        <th>Email</th>
+        <th>Phone</th>
+        <th>Role</th>
+        <th>Status</th>
+        <th>Actions</th>
+      </tr>
+    </thead>
+    <tbody>
+      @forelse($staff as $s)
+        <tr>
+          <td>{{ $s->id }}</td>
+          <td class="muted">{{ $s->employee_id }}</td>
+          <td>{{ $s->name }}</td>
+          <td>{{ $s->email }}</td>
+          <td>{{ $s->phone }}</td>
+          <td>{{ $s->role ?? '-' }}</td>
+          <td>{{ ucfirst($s->status) }}</td>
+          <td class="actions">
+            <a href="{{ route('admin.staff.edit', $s->id) }}">Edit</a>
+            <form action="{{ route('admin.staff.destroy', $s->id) }}" method="POST" style="display:inline" onsubmit="return confirm('Delete this staff?')">
+              @csrf
+              @method('DELETE')
+              <button class="btn" type="submit">Delete</button>
+            </form>
+          </td>
+        </tr>
+      @empty
+        <tr><td colspan="8" class="muted">No staff found.</td></tr>
+      @endforelse
+    </tbody>
+  </table>
+</div>
+@endsection