From b8133ffe9fb883349371b48b4e2afbeec3642933 Mon Sep 17 00:00:00 2001
From: Flatlogic Bot <support@flatlogic.com>
Date: Fri, 8 May 2026 14:20:28 +0000
Subject: [PATCH] 3

---
 .../src/components/Accounts/CardAccounts.tsx  |   18 +-
 .../Accounts/configureAccountsCols.tsx        |   18 +-
 frontend/src/components/AsideMenuLayer.tsx    |   20 +-
 frontend/src/components/Orders/CardOrders.tsx |   24 +-
 .../src/components/Orders/TableOrders.tsx     |   14 +-
 .../components/Orders/configureOrdersCols.tsx |   24 +-
 .../src/components/Products/CardProducts.tsx  |  430 ++---
 .../Products/configureProductsCols.tsx        |   28 +-
 .../Sample_requests/TableSample_requests.tsx  |   18 +-
 .../configureSample_requestsCols.tsx          |   18 +-
 frontend/src/helpers/userPermissions.ts       |    7 +-
 frontend/src/layouts/Authenticated.tsx        |    2 +-
 frontend/src/menuAside.ts                     |   59 +-
 frontend/src/pages/accounts/accounts-list.tsx |   23 +-
 .../src/pages/accounts/accounts-table.tsx     |   25 +-
 frontend/src/pages/accounts/accounts-view.tsx | 1689 ++++-------------
 frontend/src/pages/buyer-login.tsx            |  289 +--
 frontend/src/pages/buyer-portal.tsx           |  117 +-
 frontend/src/pages/dashboard.tsx              | 1029 ++++++++--
 frontend/src/pages/index.tsx                  |   60 +-
 frontend/src/pages/login.tsx                  |  226 ++-
 frontend/src/pages/orders/orders-list.tsx     |   23 +-
 frontend/src/pages/orders/orders-table.tsx    |   23 +-
 frontend/src/pages/orders/orders-view.tsx     | 1233 ++++--------
 frontend/src/pages/products/products-list.tsx |  107 +-
 .../src/pages/products/products-table.tsx     |   28 +-
 .../sample_requests/sample_requests-list.tsx  |  603 ++++--
 .../sample_requests/sample_requests-table.tsx |   24 +-
 .../sample_requests/sample_requests-view.tsx  | 1057 +++++------
 29 files changed, 3217 insertions(+), 4019 deletions(-)

diff --git a/frontend/src/components/Accounts/CardAccounts.tsx b/frontend/src/components/Accounts/CardAccounts.tsx
index 1ebfb75..66f274b 100644
--- a/frontend/src/components/Accounts/CardAccounts.tsx
+++ b/frontend/src/components/Accounts/CardAccounts.tsx
@@ -78,7 +78,7 @@ const CardAccounts = ({
               
               
                 <div className='flex justify-between gap-x-4 py-3'>
-                    <dt className='  text-gray-500  dark:text-dark-600'>Accountname</dt>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Account name</dt>
                     <dd className='flex items-start gap-x-2'>
                         <div className='font-medium line-clamp-4'>
                             { item.account_name }
@@ -90,7 +90,7 @@ const CardAccounts = ({
               
               
                 <div className='flex justify-between gap-x-4 py-3'>
-                    <dt className='  text-gray-500  dark:text-dark-600'>Accounttype</dt>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Account type</dt>
                     <dd className='flex items-start gap-x-2'>
                         <div className='font-medium line-clamp-4'>
                             { item.account_type }
@@ -102,7 +102,7 @@ const CardAccounts = ({
               
               
                 <div className='flex justify-between gap-x-4 py-3'>
-                    <dt className='  text-gray-500  dark:text-dark-600'>Accountnumber</dt>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Account number</dt>
                     <dd className='flex items-start gap-x-2'>
                         <div className='font-medium line-clamp-4'>
                             { item.account_number }
@@ -114,7 +114,7 @@ const CardAccounts = ({
               
               
                 <div className='flex justify-between gap-x-4 py-3'>
-                    <dt className='  text-gray-500  dark:text-dark-600'>Taxexemptnumber</dt>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Tax exempt number</dt>
                     <dd className='flex items-start gap-x-2'>
                         <div className='font-medium line-clamp-4'>
                             { item.tax_exempt_number }
@@ -126,7 +126,7 @@ const CardAccounts = ({
               
               
                 <div className='flex justify-between gap-x-4 py-3'>
-                    <dt className='  text-gray-500  dark:text-dark-600'>Taxexempt</dt>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Tax exempt</dt>
                     <dd className='flex items-start gap-x-2'>
                         <div className='font-medium line-clamp-4'>
                             { dataFormatter.booleanFormatter(item.is_tax_exempt) }
@@ -138,7 +138,7 @@ const CardAccounts = ({
               
               
                 <div className='flex justify-between gap-x-4 py-3'>
-                    <dt className='  text-gray-500  dark:text-dark-600'>Creditstatus</dt>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Credit status</dt>
                     <dd className='flex items-start gap-x-2'>
                         <div className='font-medium line-clamp-4'>
                             { item.credit_status }
@@ -150,7 +150,7 @@ const CardAccounts = ({
               
               
                 <div className='flex justify-between gap-x-4 py-3'>
-                    <dt className='  text-gray-500  dark:text-dark-600'>Creditlimit</dt>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Credit limit</dt>
                     <dd className='flex items-start gap-x-2'>
                         <div className='font-medium line-clamp-4'>
                             { item.credit_limit }
@@ -162,7 +162,7 @@ const CardAccounts = ({
               
               
                 <div className='flex justify-between gap-x-4 py-3'>
-                    <dt className='  text-gray-500  dark:text-dark-600'>Defaultpricelist</dt>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Default price list</dt>
                     <dd className='flex items-start gap-x-2'>
                         <div className='font-medium line-clamp-4'>
                             { dataFormatter.price_listsOneListFormatter(item.default_price_list) }
@@ -174,7 +174,7 @@ const CardAccounts = ({
               
               
                 <div className='flex justify-between gap-x-4 py-3'>
-                    <dt className='  text-gray-500  dark:text-dark-600'>Assignedsalesrep</dt>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Assigned sales rep</dt>
                     <dd className='flex items-start gap-x-2'>
                         <div className='font-medium line-clamp-4'>
                             { dataFormatter.usersOneListFormatter(item.assigned_sales_rep) }
diff --git a/frontend/src/components/Accounts/configureAccountsCols.tsx b/frontend/src/components/Accounts/configureAccountsCols.tsx
index 4ecb509..7c40caa 100644
--- a/frontend/src/components/Accounts/configureAccountsCols.tsx
+++ b/frontend/src/components/Accounts/configureAccountsCols.tsx
@@ -43,7 +43,7 @@ export const loadColumns = async (
         
         {
             field: 'account_name',
-            headerName: 'Accountname',
+            headerName: 'Account name',
             flex: 1,
             minWidth: 120,
             filterable: false,
@@ -58,7 +58,7 @@ export const loadColumns = async (
         
         {
             field: 'account_type',
-            headerName: 'Accounttype',
+            headerName: 'Account type',
             flex: 1,
             minWidth: 120,
             filterable: false,
@@ -73,7 +73,7 @@ export const loadColumns = async (
         
         {
             field: 'account_number',
-            headerName: 'Accountnumber',
+            headerName: 'Account number',
             flex: 1,
             minWidth: 120,
             filterable: false,
@@ -88,7 +88,7 @@ export const loadColumns = async (
         
         {
             field: 'tax_exempt_number',
-            headerName: 'Taxexemptnumber',
+            headerName: 'Tax exempt number',
             flex: 1,
             minWidth: 120,
             filterable: false,
@@ -103,7 +103,7 @@ export const loadColumns = async (
         
         {
             field: 'is_tax_exempt',
-            headerName: 'Taxexempt',
+            headerName: 'Tax exempt',
             flex: 1,
             minWidth: 120,
             filterable: false,
@@ -119,7 +119,7 @@ export const loadColumns = async (
         
         {
             field: 'credit_status',
-            headerName: 'Creditstatus',
+            headerName: 'Credit status',
             flex: 1,
             minWidth: 120,
             filterable: false,
@@ -134,7 +134,7 @@ export const loadColumns = async (
         
         {
             field: 'credit_limit',
-            headerName: 'Creditlimit',
+            headerName: 'Credit limit',
             flex: 1,
             minWidth: 120,
             filterable: false,
@@ -150,7 +150,7 @@ export const loadColumns = async (
         
         {
             field: 'default_price_list',
-            headerName: 'Defaultpricelist',
+            headerName: 'Default price list',
             flex: 1,
             minWidth: 120,
             filterable: false,
@@ -172,7 +172,7 @@ export const loadColumns = async (
         
         {
             field: 'assigned_sales_rep',
-            headerName: 'Assignedsalesrep',
+            headerName: 'Assigned sales rep',
             flex: 1,
             minWidth: 120,
             filterable: false,
diff --git a/frontend/src/components/AsideMenuLayer.tsx b/frontend/src/components/AsideMenuLayer.tsx
index 65fa6b2..19d87f9 100644
--- a/frontend/src/components/AsideMenuLayer.tsx
+++ b/frontend/src/components/AsideMenuLayer.tsx
@@ -4,6 +4,7 @@ import BaseIcon from './BaseIcon';
 import AsideMenuList from './AsideMenuList';
 import { MenuAsideItem } from '../interfaces';
 import { useAppSelector } from '../stores/hooks';
+import { hasPermission } from '../helpers/userPermissions';
 
 type Props = {
   menu: MenuAsideItem[];
@@ -21,6 +22,23 @@ export default function AsideMenuLayer({
     (state) => state.style.asideScrollbarsStyle,
   );
   const darkMode = useAppSelector((state) => state.style.darkMode);
+  const { currentUser } = useAppSelector((state) => state.auth);
+  const canUseBuyerPortal = hasPermission(currentUser, 'READ_BUYER_PORTAL');
+  const canReadBuyerTeamQueue = hasPermission(
+    currentUser,
+    'READ_BUYER_TEAM_QUEUE',
+  );
+  const hasSupplierAccess = hasPermission(currentUser, [
+    'READ_ACCOUNTS',
+    'READ_PRODUCTS',
+    'READ_ORDERS',
+    'READ_INVENTORY_ITEMS',
+  ]);
+  const workspaceLabel = canUseBuyerPortal && !hasSupplierAccess
+    ? canReadBuyerTeamQueue
+      ? 'Buyer admin queue'
+      : 'Buyer ordering workspace'
+    : 'Supplier operations';
 
   const handleAsideLgCloseClick = (e: React.MouseEvent) => {
     e.preventDefault();
@@ -70,7 +88,7 @@ export default function AsideMenuLayer({
             Workspace
           </p>
           <p className='mt-1 text-sm font-semibold text-slate-700 dark:text-slate-200'>
-            Contract catalog + orders
+            {workspaceLabel}
           </p>
         </div>
       </div>
diff --git a/frontend/src/components/Orders/CardOrders.tsx b/frontend/src/components/Orders/CardOrders.tsx
index 64c7dbd..b83c5b6 100644
--- a/frontend/src/components/Orders/CardOrders.tsx
+++ b/frontend/src/components/Orders/CardOrders.tsx
@@ -78,7 +78,7 @@ const CardOrders = ({
               
               
                 <div className='flex justify-between gap-x-4 py-3'>
-                    <dt className='  text-gray-500  dark:text-dark-600'>Ordernumber</dt>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Order number</dt>
                     <dd className='flex items-start gap-x-2'>
                         <div className='font-medium line-clamp-4'>
                             { item.order_number }
@@ -126,7 +126,7 @@ const CardOrders = ({
               
               
                 <div className='flex justify-between gap-x-4 py-3'>
-                    <dt className='  text-gray-500  dark:text-dark-600'>POnumber</dt>
+                    <dt className='  text-gray-500  dark:text-dark-600'>PO number</dt>
                     <dd className='flex items-start gap-x-2'>
                         <div className='font-medium line-clamp-4'>
                             { item.po_number }
@@ -138,7 +138,7 @@ const CardOrders = ({
               
               
                 <div className='flex justify-between gap-x-4 py-3'>
-                    <dt className='  text-gray-500  dark:text-dark-600'>Orderedat</dt>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Ordered at</dt>
                     <dd className='flex items-start gap-x-2'>
                         <div className='font-medium line-clamp-4'>
                             { dataFormatter.dateTimeFormatter(item.ordered_at) }
@@ -150,7 +150,7 @@ const CardOrders = ({
               
               
                 <div className='flex justify-between gap-x-4 py-3'>
-                    <dt className='  text-gray-500  dark:text-dark-600'>Requesteddeliverydate</dt>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Requested delivery date</dt>
                     <dd className='flex items-start gap-x-2'>
                         <div className='font-medium line-clamp-4'>
                             { dataFormatter.dateTimeFormatter(item.requested_delivery_date) }
@@ -162,7 +162,7 @@ const CardOrders = ({
               
               
                 <div className='flex justify-between gap-x-4 py-3'>
-                    <dt className='  text-gray-500  dark:text-dark-600'>Promiseddeliverydate</dt>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Promised delivery date</dt>
                     <dd className='flex items-start gap-x-2'>
                         <div className='font-medium line-clamp-4'>
                             { dataFormatter.dateTimeFormatter(item.promised_delivery_date) }
@@ -174,7 +174,7 @@ const CardOrders = ({
               
               
                 <div className='flex justify-between gap-x-4 py-3'>
-                    <dt className='  text-gray-500  dark:text-dark-600'>Orderstatus</dt>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Order status</dt>
                     <dd className='flex items-start gap-x-2'>
                         <div className='font-medium line-clamp-4'>
                             { item.order_status }
@@ -186,7 +186,7 @@ const CardOrders = ({
               
               
                 <div className='flex justify-between gap-x-4 py-3'>
-                    <dt className='  text-gray-500  dark:text-dark-600'>Paymentterms</dt>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Payment terms</dt>
                     <dd className='flex items-start gap-x-2'>
                         <div className='font-medium line-clamp-4'>
                             { item.payment_terms }
@@ -210,7 +210,7 @@ const CardOrders = ({
               
               
                 <div className='flex justify-between gap-x-4 py-3'>
-                    <dt className='  text-gray-500  dark:text-dark-600'>Taxtotal</dt>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Tax total</dt>
                     <dd className='flex items-start gap-x-2'>
                         <div className='font-medium line-clamp-4'>
                             { item.tax_total }
@@ -222,7 +222,7 @@ const CardOrders = ({
               
               
                 <div className='flex justify-between gap-x-4 py-3'>
-                    <dt className='  text-gray-500  dark:text-dark-600'>Shippingtotal</dt>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Shipping total</dt>
                     <dd className='flex items-start gap-x-2'>
                         <div className='font-medium line-clamp-4'>
                             { item.shipping_total }
@@ -234,7 +234,7 @@ const CardOrders = ({
               
               
                 <div className='flex justify-between gap-x-4 py-3'>
-                    <dt className='  text-gray-500  dark:text-dark-600'>Ordertotal</dt>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Order total</dt>
                     <dd className='flex items-start gap-x-2'>
                         <div className='font-medium line-clamp-4'>
                             { item.order_total }
@@ -246,7 +246,7 @@ const CardOrders = ({
               
               
                 <div className='flex justify-between gap-x-4 py-3'>
-                    <dt className='  text-gray-500  dark:text-dark-600'>Buyernotes</dt>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Buyer notes</dt>
                     <dd className='flex items-start gap-x-2'>
                         <div className='font-medium line-clamp-4'>
                             { item.buyer_notes }
@@ -258,7 +258,7 @@ const CardOrders = ({
               
               
                 <div className='flex justify-between gap-x-4 py-3'>
-                    <dt className='  text-gray-500  dark:text-dark-600'>Internalnotes</dt>
+                    <dt className='  text-gray-500  dark:text-dark-600'>Internal notes</dt>
                     <dd className='flex items-start gap-x-2'>
                         <div className='font-medium line-clamp-4'>
                             { item.internal_notes }
diff --git a/frontend/src/components/Orders/TableOrders.tsx b/frontend/src/components/Orders/TableOrders.tsx
index 3e06db7..72f3586 100644
--- a/frontend/src/components/Orders/TableOrders.tsx
+++ b/frontend/src/components/Orders/TableOrders.tsx
@@ -98,19 +98,19 @@ const TableSampleOrders = ({ filterItems, setFilterItems, filters, showGrid }) =
       
       setKanbanColumns([
           
-          { id: "draft", label: "draft" },
+          { id: "draft", label: "Draft" },
           
-          { id: "submitted", label: "submitted" },
+          { id: "submitted", label: "Submitted" },
           
-          { id: "approved", label: "approved" },
+          { id: "approved", label: "Approved" },
           
-          { id: "picking", label: "picking" },
+          { id: "picking", label: "Picking" },
           
-          { id: "shipped", label: "shipped" },
+          { id: "shipped", label: "Shipped" },
           
-          { id: "delivered", label: "delivered" },
+          { id: "delivered", label: "Delivered" },
           
-          { id: "cancelled", label: "cancelled" },
+          { id: "cancelled", label: "Cancelled" },
           
       ]);
       
diff --git a/frontend/src/components/Orders/configureOrdersCols.tsx b/frontend/src/components/Orders/configureOrdersCols.tsx
index 8cc2122..f54d5d7 100644
--- a/frontend/src/components/Orders/configureOrdersCols.tsx
+++ b/frontend/src/components/Orders/configureOrdersCols.tsx
@@ -43,7 +43,7 @@ export const loadColumns = async (
         
         {
             field: 'order_number',
-            headerName: 'Ordernumber',
+            headerName: 'Order number',
             flex: 1,
             minWidth: 120,
             filterable: false,
@@ -124,7 +124,7 @@ export const loadColumns = async (
         
         {
             field: 'po_number',
-            headerName: 'POnumber',
+            headerName: 'PO number',
             flex: 1,
             minWidth: 120,
             filterable: false,
@@ -139,7 +139,7 @@ export const loadColumns = async (
         
         {
             field: 'ordered_at',
-            headerName: 'Orderedat',
+            headerName: 'Ordered at',
             flex: 1,
             minWidth: 120,
             filterable: false,
@@ -157,7 +157,7 @@ export const loadColumns = async (
         
         {
             field: 'requested_delivery_date',
-            headerName: 'Requesteddeliverydate',
+            headerName: 'Requested delivery date',
             flex: 1,
             minWidth: 120,
             filterable: false,
@@ -175,7 +175,7 @@ export const loadColumns = async (
         
         {
             field: 'promised_delivery_date',
-            headerName: 'Promiseddeliverydate',
+            headerName: 'Promised delivery date',
             flex: 1,
             minWidth: 120,
             filterable: false,
@@ -193,7 +193,7 @@ export const loadColumns = async (
         
         {
             field: 'order_status',
-            headerName: 'Orderstatus',
+            headerName: 'Order status',
             flex: 1,
             minWidth: 120,
             filterable: false,
@@ -208,7 +208,7 @@ export const loadColumns = async (
         
         {
             field: 'payment_terms',
-            headerName: 'Paymentterms',
+            headerName: 'Payment terms',
             flex: 1,
             minWidth: 120,
             filterable: false,
@@ -239,7 +239,7 @@ export const loadColumns = async (
         
         {
             field: 'tax_total',
-            headerName: 'Taxtotal',
+            headerName: 'Tax total',
             flex: 1,
             minWidth: 120,
             filterable: false,
@@ -255,7 +255,7 @@ export const loadColumns = async (
         
         {
             field: 'shipping_total',
-            headerName: 'Shippingtotal',
+            headerName: 'Shipping total',
             flex: 1,
             minWidth: 120,
             filterable: false,
@@ -271,7 +271,7 @@ export const loadColumns = async (
         
         {
             field: 'order_total',
-            headerName: 'Ordertotal',
+            headerName: 'Order total',
             flex: 1,
             minWidth: 120,
             filterable: false,
@@ -287,7 +287,7 @@ export const loadColumns = async (
         
         {
             field: 'buyer_notes',
-            headerName: 'Buyernotes',
+            headerName: 'Buyer notes',
             flex: 1,
             minWidth: 120,
             filterable: false,
@@ -302,7 +302,7 @@ export const loadColumns = async (
         
         {
             field: 'internal_notes',
-            headerName: 'Internalnotes',
+            headerName: 'Internal notes',
             flex: 1,
             minWidth: 120,
             filterable: false,
diff --git a/frontend/src/components/Products/CardProducts.tsx b/frontend/src/components/Products/CardProducts.tsx
index 9021335..1143c01 100644
--- a/frontend/src/components/Products/CardProducts.tsx
+++ b/frontend/src/components/Products/CardProducts.tsx
@@ -4,11 +4,11 @@ import ListActionsPopover from '../ListActionsPopover';
 import { useAppSelector } from '../../stores/hooks';
 import dataFormatter from '../../helpers/dataFormatter';
 import { Pagination } from '../Pagination';
-import {saveFile} from "../../helpers/fileSaver";
+import { saveFile } from '../../helpers/fileSaver';
 import LoadingSpinner from "../LoadingSpinner";
 import Link from 'next/link';
 
-import {hasPermission} from "../../helpers/userPermissions";
+import { hasPermission } from "../../helpers/userPermissions";
 
 
 type Props = {
@@ -20,6 +20,51 @@ type Props = {
   onPageChange: (page: number) => void;
 };
 
+const readableValue = (value) => {
+  if (!value) {
+    return 'Not set';
+  }
+
+  return String(value).replace(/_/g, ' ');
+};
+
+const temperatureClasses = (value) => {
+  if (value === 'refrigerated') {
+    return 'border-sky-200 bg-sky-50 text-sky-800 dark:border-sky-800 dark:bg-sky-950 dark:text-sky-100';
+  }
+
+  if (value === 'frozen') {
+    return 'border-cyan-200 bg-cyan-50 text-cyan-800 dark:border-cyan-800 dark:bg-cyan-950 dark:text-cyan-100';
+  }
+
+  return 'border-emerald-200 bg-emerald-50 text-emerald-800 dark:border-emerald-800 dark:bg-emerald-950 dark:text-emerald-100';
+};
+
+const statusClasses = (value) => {
+  if (value === 'active') {
+    return 'border-emerald-200 bg-emerald-50 text-emerald-800 dark:border-emerald-800 dark:bg-emerald-950 dark:text-emerald-100';
+  }
+
+  if (value === 'seasonal') {
+    return 'border-amber-200 bg-amber-50 text-amber-800 dark:border-amber-800 dark:bg-amber-950 dark:text-amber-100';
+  }
+
+  if (value === 'out_of_stock') {
+    return 'border-rose-200 bg-rose-50 text-rose-800 dark:border-rose-800 dark:bg-rose-950 dark:text-rose-100';
+  }
+
+  return 'border-slate-200 bg-slate-50 text-slate-700 dark:border-dark-700 dark:bg-dark-800 dark:text-slate-200';
+};
+
+const fallbackProductImages = [
+  'https://images.unsplash.com/photo-1452195100486-9cc805987862?auto=format&fit=crop&w=900&q=80',
+  'https://images.unsplash.com/photo-1501443762994-82bd5dace89a?auto=format&fit=crop&w=900&q=80',
+  'https://images.unsplash.com/photo-1544025162-d76694265947?auto=format&fit=crop&w=900&q=80',
+  'https://images.unsplash.com/photo-1486297678162-eb2a19b0a32d?auto=format&fit=crop&w=900&q=80',
+  'https://images.unsplash.com/photo-1512621776951-a57141f2eefd?auto=format&fit=crop&w=900&q=80',
+  'https://images.unsplash.com/photo-1542838132-92c53300491e?auto=format&fit=crop&w=900&q=80',
+];
+
 const CardProducts = ({
   products,
   loading,
@@ -28,312 +73,161 @@ const CardProducts = ({
   numPages,
   onPageChange,
 }: Props) => {
-    const asideScrollbarsStyle = useAppSelector(
-        (state) => state.style.asideScrollbarsStyle,
-    );
-    const bgColor = useAppSelector((state) => state.style.cardsColor);
-    const darkMode = useAppSelector((state) => state.style.darkMode);
-    const corners = useAppSelector((state) => state.style.corners);
-    const focusRing = useAppSelector((state) => state.style.focusRingColor);
-    
     const currentUser = useAppSelector((state) => state.auth.currentUser);
     const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_PRODUCTS')
     
 
   return (
-    <div className={'p-4'}>
+    <div className='p-4 md:p-6'>
       {loading && <LoadingSpinner />}
       <ul
         role='list'
-        className='grid grid-cols-1 gap-x-6 gap-y-8 lg:grid-cols-3 2xl:grid-cols-4 xl:gap-x-8'
+        className='grid grid-cols-1 gap-5 lg:grid-cols-2 2xl:grid-cols-3'
       >
-        {!loading && products.map((item, index) => (
+        {!loading && products.map((item, index) => {
+          const category = dataFormatter.product_categoriesOneListFormatter(item.category) || 'Uncategorized';
+          const specSheetLinks = dataFormatter.filesFormatter(item.spec_sheet);
+          const sampleEligible = item.is_sample_eligible === true || item.is_sample_eligible === 'true';
+          const hasProductImage = Array.isArray(item.images) ? item.images.length > 0 : Boolean(item.images);
+          const fallbackImage = fallbackProductImages[index % fallbackProductImages.length];
+
+          return (
           <li
             key={item.id}
-            className={`overflow-hidden ${corners !== 'rounded-full'? corners : 'rounded-3xl'} border  ${focusRing} border-gray-200 dark:border-dark-700 ${
-                darkMode ? 'aside-scrollbars-[slate]' : asideScrollbarsStyle
-            }`}
+            className='overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm transition hover:-translate-y-0.5 hover:border-emerald-200 hover:shadow-md dark:border-dark-700 dark:bg-dark-900'
           >
-            
-            <div className={`flex items-center ${bgColor} p-6  md:p-0 md:block  gap-x-4 border-b border-gray-900/5 bg-gray-50 dark:bg-dark-800 relative`}>
-                
-                <Link
-                    href={`/products/products-view/?id=${item.id}`}
-                    className={'cursor-pointer'}
-                >
+            <div className='relative border-b border-slate-200 bg-slate-100 dark:border-dark-700 dark:bg-dark-800'>
+              <Link href={`/products/products-view/?id=${item.id}`} className='block'>
+                {hasProductImage ? (
                   <ImageField
-                    name={'Avatar'}
+                    name={'Product image'}
                     image={item.images}
-                    className='w-12 h-12 md:w-full md:h-44 rounded-lg md:rounded-b-none overflow-hidden ring-1 ring-gray-900/10'
-                    imageClassName='h-full w-full flex-none rounded-lg md:rounded-b-none bg-white object-cover'
+                    className='h-48 w-full overflow-hidden'
+                    imageClassName='h-full w-full bg-white object-cover'
                   />
-                  <p className={'px-6 py-2 font-semibold'}>{item.product_name}</p>
-                </Link>
-              
-
-              <div className='ml-auto  md:absolute md:top-0 md:right-0 '>
+                ) : (
+                  <div
+                    role='img'
+                    aria-label={item.product_name}
+                    className='h-48 w-full bg-cover bg-center bg-white'
+                    style={{ backgroundImage: `url(${fallbackImage})` }}
+                  />
+                )}
+              </Link>
+              <div className='absolute left-4 top-4 rounded-full border border-white/70 bg-white/95 px-3 py-1 text-xs font-bold uppercase tracking-[0.16em] text-slate-700 shadow-sm dark:border-dark-700 dark:bg-dark-900/95 dark:text-slate-200'>
+                {item.sku}
+              </div>
+              <div className='absolute right-3 top-3'>
                 <ListActionsPopover
                   onDelete={onDelete}
                   itemId={item.id}
                   pathEdit={`/products/products-edit/?id=${item.id}`}
                   pathView={`/products/products-view/?id=${item.id}`}
-                  
                   hasUpdatePermission={hasUpdatePermission}
-                  
                 />
               </div>
             </div>
-            <dl className='divide-y  divide-stone-300   dark:divide-dark-700 px-6 py-4 text-sm leading-6 h-64 overflow-y-auto'>
-              
-              
-                <div className='flex justify-between gap-x-4 py-3'>
-                    <dt className='  text-gray-500  dark:text-dark-600'>SKU</dt>
-                    <dd className='flex items-start gap-x-2'>
-                        <div className='font-medium line-clamp-4'>
-                            { item.sku }
-                        </div>
-                    </dd>
-                </div>
-              
 
-              
-              
-                <div className='flex justify-between gap-x-4 py-3'>
-                    <dt className='  text-gray-500  dark:text-dark-600'>Productname</dt>
-                    <dd className='flex items-start gap-x-2'>
-                        <div className='font-medium line-clamp-4'>
-                            { item.product_name }
-                        </div>
-                    </dd>
-                </div>
-              
+            <div className='p-5'>
+              <div className='mb-3 flex flex-wrap items-center gap-2'>
+                <span className={`rounded-full border px-3 py-1 text-xs font-semibold capitalize ${statusClasses(item.product_status)}`}>
+                  {readableValue(item.product_status)}
+                </span>
+                <span className={`rounded-full border px-3 py-1 text-xs font-semibold capitalize ${temperatureClasses(item.temperature_zone)}`}>
+                  {readableValue(item.temperature_zone)}
+                </span>
+                {sampleEligible && (
+                  <span className='rounded-full border border-amber-200 bg-amber-50 px-3 py-1 text-xs font-semibold text-amber-800 dark:border-amber-800 dark:bg-amber-950 dark:text-amber-100'>
+                    Sample-ready
+                  </span>
+                )}
+              </div>
 
-              
-              
-                <div className='flex justify-between gap-x-4 py-3'>
-                    <dt className='  text-gray-500  dark:text-dark-600'>Brand</dt>
-                    <dd className='flex items-start gap-x-2'>
-                        <div className='font-medium line-clamp-4'>
-                            { item.brand }
-                        </div>
-                    </dd>
-                </div>
-              
+              <div className='mb-2 text-xs font-bold uppercase tracking-[0.18em] text-emerald-700 dark:text-emerald-300'>
+                {category}
+              </div>
+              <Link href={`/products/products-view/?id=${item.id}`} className='block'>
+                <h2 className='text-xl font-semibold leading-7 text-slate-950 hover:text-emerald-700 dark:text-white dark:hover:text-emerald-300'>
+                  {item.product_name}
+                </h2>
+              </Link>
+              <div className='mt-1 text-sm font-medium text-slate-500 dark:text-slate-400'>
+                {item.brand}
+              </div>
+              <p className='mt-3 min-h-[3.5rem] text-sm leading-6 text-slate-600 line-clamp-3 dark:text-slate-300'>
+                {item.short_description || item.long_description || 'No product description yet.'}
+              </p>
 
-              
-              
-                <div className='flex justify-between gap-x-4 py-3'>
-                    <dt className='  text-gray-500  dark:text-dark-600'>Category</dt>
-                    <dd className='flex items-start gap-x-2'>
-                        <div className='font-medium line-clamp-4'>
-                            { dataFormatter.product_categoriesOneListFormatter(item.category) }
-                        </div>
-                    </dd>
+              <div className='mt-5 grid grid-cols-2 gap-3 text-sm'>
+                <div className='rounded-xl border border-slate-200 bg-slate-50 p-3 dark:border-dark-700 dark:bg-dark-800'>
+                  <div className='text-xs font-bold uppercase tracking-[0.14em] text-slate-500 dark:text-slate-400'>Pack</div>
+                  <div className='mt-1 font-semibold text-slate-950 dark:text-white'>{item.pack_size || 'Not set'}</div>
                 </div>
-              
-
-              
-              
-                <div className='flex justify-between gap-x-4 py-3'>
-                    <dt className='  text-gray-500  dark:text-dark-600'>Shortdescription</dt>
-                    <dd className='flex items-start gap-x-2'>
-                        <div className='font-medium line-clamp-4'>
-                            { item.short_description }
-                        </div>
-                    </dd>
+                <div className='rounded-xl border border-slate-200 bg-slate-50 p-3 dark:border-dark-700 dark:bg-dark-800'>
+                  <div className='text-xs font-bold uppercase tracking-[0.14em] text-slate-500 dark:text-slate-400'>MOQ</div>
+                  <div className='mt-1 font-semibold text-slate-950 dark:text-white'>{item.moq_cases || 0} cases</div>
                 </div>
-              
-
-              
-              
-                <div className='flex justify-between gap-x-4 py-3'>
-                    <dt className='  text-gray-500  dark:text-dark-600'>Longdescription</dt>
-                    <dd className='flex items-start gap-x-2'>
-                        <div className='font-medium line-clamp-4'>
-                            { item.long_description }
-                        </div>
-                    </dd>
+                <div className='rounded-xl border border-slate-200 bg-slate-50 p-3 dark:border-dark-700 dark:bg-dark-800'>
+                  <div className='text-xs font-bold uppercase tracking-[0.14em] text-slate-500 dark:text-slate-400'>Units</div>
+                  <div className='mt-1 font-semibold text-slate-950 dark:text-white'>{item.units_per_case || 0} / case</div>
                 </div>
-              
-
-              
-              
-                <div className='flex justify-between gap-x-4 py-3'>
-                    <dt className='  text-gray-500  dark:text-dark-600'>Images</dt>
-                    <dd className='flex items-start gap-x-2'>
-                        <div className='font-medium'>
-                            <ImageField
-                                name={'Avatar'}
-                                image={item.images}
-                                className='mx-auto w-8 h-8'
-                            />
-                        </div>
-                    </dd>
+                <div className='rounded-xl border border-slate-200 bg-slate-50 p-3 dark:border-dark-700 dark:bg-dark-800'>
+                  <div className='text-xs font-bold uppercase tracking-[0.14em] text-slate-500 dark:text-slate-400'>Case wt.</div>
+                  <div className='mt-1 font-semibold text-slate-950 dark:text-white'>{item.case_weight_lbs || 0} lbs</div>
                 </div>
-              
+              </div>
 
-              
-              
-                <div className='flex justify-between gap-x-4 py-3'>
-                    <dt className='  text-gray-500  dark:text-dark-600'>Specsheet</dt>
-                    <dd className='flex items-start gap-x-2'>
-                        <div className='font-medium'>
-                            {dataFormatter.filesFormatter(item.spec_sheet).map(link => (
-                                <button
-                                    key={link.publicUrl}
-                                    onClick={(e) => saveFile(e, link.publicUrl, link.name)}
-                                >
-                                    {link.name}
-                                </button>
-                            ))}
-                        </div>
-                    </dd>
+              <div className='mt-5 space-y-3 border-t border-slate-200 pt-4 text-sm dark:border-dark-700'>
+                <div>
+                  <div className='mb-1 font-semibold text-slate-700 dark:text-slate-200'>Allergens</div>
+                  <div className='text-slate-600 dark:text-slate-300'>{item.allergens || 'None listed'}</div>
                 </div>
-              
-
-              
-              
-                <div className='flex justify-between gap-x-4 py-3'>
-                    <dt className='  text-gray-500  dark:text-dark-600'>Packsize</dt>
-                    <dd className='flex items-start gap-x-2'>
-                        <div className='font-medium line-clamp-4'>
-                            { item.pack_size }
-                        </div>
-                    </dd>
+                <div>
+                  <div className='mb-1 font-semibold text-slate-700 dark:text-slate-200'>Certifications</div>
+                  <div className='text-slate-600 dark:text-slate-300'>{item.certifications || 'None listed'}</div>
                 </div>
-              
+              </div>
 
-              
-              
-                <div className='flex justify-between gap-x-4 py-3'>
-                    <dt className='  text-gray-500  dark:text-dark-600'>Unitspercase</dt>
-                    <dd className='flex items-start gap-x-2'>
-                        <div className='font-medium line-clamp-4'>
-                            { item.units_per_case }
-                        </div>
-                    </dd>
-                </div>
-              
-
-              
-              
-                <div className='flex justify-between gap-x-4 py-3'>
-                    <dt className='  text-gray-500  dark:text-dark-600'>Unitweight(lbs)</dt>
-                    <dd className='flex items-start gap-x-2'>
-                        <div className='font-medium line-clamp-4'>
-                            { item.unit_weight_lbs }
-                        </div>
-                    </dd>
-                </div>
-              
-
-              
-              
-                <div className='flex justify-between gap-x-4 py-3'>
-                    <dt className='  text-gray-500  dark:text-dark-600'>Caseweight(lbs)</dt>
-                    <dd className='flex items-start gap-x-2'>
-                        <div className='font-medium line-clamp-4'>
-                            { item.case_weight_lbs }
-                        </div>
-                    </dd>
-                </div>
-              
-
-              
-              
-                <div className='flex justify-between gap-x-4 py-3'>
-                    <dt className='  text-gray-500  dark:text-dark-600'>Unitofmeasure</dt>
-                    <dd className='flex items-start gap-x-2'>
-                        <div className='font-medium line-clamp-4'>
-                            { item.uom }
-                        </div>
-                    </dd>
-                </div>
-              
-
-              
-              
-                <div className='flex justify-between gap-x-4 py-3'>
-                    <dt className='  text-gray-500  dark:text-dark-600'>MOQ(cases)</dt>
-                    <dd className='flex items-start gap-x-2'>
-                        <div className='font-medium line-clamp-4'>
-                            { item.moq_cases }
-                        </div>
-                    </dd>
-                </div>
-              
-
-              
-              
-                <div className='flex justify-between gap-x-4 py-3'>
-                    <dt className='  text-gray-500  dark:text-dark-600'>Temperaturezone</dt>
-                    <dd className='flex items-start gap-x-2'>
-                        <div className='font-medium line-clamp-4'>
-                            { item.temperature_zone }
-                        </div>
-                    </dd>
-                </div>
-              
-
-              
-              
-                <div className='flex justify-between gap-x-4 py-3'>
-                    <dt className='  text-gray-500  dark:text-dark-600'>Productstatus</dt>
-                    <dd className='flex items-start gap-x-2'>
-                        <div className='font-medium line-clamp-4'>
-                            { item.product_status }
-                        </div>
-                    </dd>
-                </div>
-              
-
-              
-              
-                <div className='flex justify-between gap-x-4 py-3'>
-                    <dt className='  text-gray-500  dark:text-dark-600'>Allergens</dt>
-                    <dd className='flex items-start gap-x-2'>
-                        <div className='font-medium line-clamp-4'>
-                            { item.allergens }
-                        </div>
-                    </dd>
-                </div>
-              
-
-              
-              
-                <div className='flex justify-between gap-x-4 py-3'>
-                    <dt className='  text-gray-500  dark:text-dark-600'>Certifications</dt>
-                    <dd className='flex items-start gap-x-2'>
-                        <div className='font-medium line-clamp-4'>
-                            { item.certifications }
-                        </div>
-                    </dd>
-                </div>
-              
-
-              
-              
-                <div className='flex justify-between gap-x-4 py-3'>
-                    <dt className='  text-gray-500  dark:text-dark-600'>Sampleeligible</dt>
-                    <dd className='flex items-start gap-x-2'>
-                        <div className='font-medium line-clamp-4'>
-                            { dataFormatter.booleanFormatter(item.is_sample_eligible) }
-                        </div>
-                    </dd>
-                </div>
-              
-
-              
-            </dl>
+              <div className='mt-5 flex flex-wrap items-center gap-3'>
+                <Link
+                  href={`/products/products-view/?id=${item.id}`}
+                  className='rounded-lg bg-slate-950 px-4 py-2 text-sm font-semibold text-white transition hover:bg-emerald-700 dark:bg-white dark:text-slate-950 dark:hover:bg-emerald-100'
+                >
+                  Open SKU
+                </Link>
+                {hasUpdatePermission && (
+                  <Link
+                    href={`/products/products-edit/?id=${item.id}`}
+                    className='rounded-lg border border-slate-300 px-4 py-2 text-sm font-semibold text-slate-700 transition hover:border-emerald-300 hover:text-emerald-700 dark:border-dark-700 dark:text-slate-200 dark:hover:border-emerald-700 dark:hover:text-emerald-300'
+                  >
+                    Edit
+                  </Link>
+                )}
+                {specSheetLinks.length > 0 && (
+                  <button
+                    type='button'
+                    className='text-sm font-semibold text-slate-600 underline-offset-4 hover:text-emerald-700 hover:underline dark:text-slate-300 dark:hover:text-emerald-300'
+                    onClick={(e) => saveFile(e, specSheetLinks[0].publicUrl, specSheetLinks[0].name)}
+                  >
+                    Spec sheet
+                  </button>
+                )}
+              </div>
+            </div>
           </li>
-        ))}
+        )})}
         {!loading && products.length === 0 && (
-          <div className='col-span-full flex items-center justify-center h-40'>
-            <p className=''>No data to display</p>
+          <div className='col-span-full flex min-h-64 items-center justify-center rounded-2xl border border-dashed border-slate-300 bg-white p-8 text-center dark:border-dark-700 dark:bg-dark-900'>
+            <div>
+              <div className='text-lg font-semibold text-slate-950 dark:text-white'>No catalog items yet</div>
+              <p className='mt-2 max-w-md text-sm text-slate-500 dark:text-slate-400'>
+                Add SKUs or import a CSV to start building the distributor catalog buyers will reorder from.
+              </p>
+            </div>
           </div>
         )}
       </ul>
-      <div className={'flex items-center justify-center my-6'}>
+      <div className='flex items-center justify-center my-6'>
         <Pagination
           currentPage={currentPage}
           numPages={numPages}
diff --git a/frontend/src/components/Products/configureProductsCols.tsx b/frontend/src/components/Products/configureProductsCols.tsx
index 7d06265..22889c4 100644
--- a/frontend/src/components/Products/configureProductsCols.tsx
+++ b/frontend/src/components/Products/configureProductsCols.tsx
@@ -58,7 +58,7 @@ export const loadColumns = async (
         
         {
             field: 'product_name',
-            headerName: 'Productname',
+            headerName: 'Product name',
             flex: 1,
             minWidth: 120,
             filterable: false,
@@ -110,7 +110,7 @@ export const loadColumns = async (
         
         {
             field: 'short_description',
-            headerName: 'Shortdescription',
+            headerName: 'Short description',
             flex: 1,
             minWidth: 120,
             filterable: false,
@@ -125,7 +125,7 @@ export const loadColumns = async (
         
         {
             field: 'long_description',
-            headerName: 'Longdescription',
+            headerName: 'Long description',
             flex: 1,
             minWidth: 120,
             filterable: false,
@@ -140,7 +140,7 @@ export const loadColumns = async (
         
         {
             field: 'images',
-            headerName: 'Images',
+            headerName: 'Image',
             flex: 1,
             minWidth: 120,
             filterable: false,
@@ -161,7 +161,7 @@ export const loadColumns = async (
         
         {
             field: 'spec_sheet',
-            headerName: 'Specsheet',
+            headerName: 'Spec sheet',
             flex: 1,
             minWidth: 120,
             filterable: false,
@@ -187,7 +187,7 @@ export const loadColumns = async (
         
         {
             field: 'pack_size',
-            headerName: 'Packsize',
+            headerName: 'Pack size',
             flex: 1,
             minWidth: 120,
             filterable: false,
@@ -202,7 +202,7 @@ export const loadColumns = async (
         
         {
             field: 'units_per_case',
-            headerName: 'Unitspercase',
+            headerName: 'Units per case',
             flex: 1,
             minWidth: 120,
             filterable: false,
@@ -218,7 +218,7 @@ export const loadColumns = async (
         
         {
             field: 'unit_weight_lbs',
-            headerName: 'Unitweight(lbs)',
+            headerName: 'Unit weight lbs',
             flex: 1,
             minWidth: 120,
             filterable: false,
@@ -234,7 +234,7 @@ export const loadColumns = async (
         
         {
             field: 'case_weight_lbs',
-            headerName: 'Caseweight(lbs)',
+            headerName: 'Case weight lbs',
             flex: 1,
             minWidth: 120,
             filterable: false,
@@ -250,7 +250,7 @@ export const loadColumns = async (
         
         {
             field: 'uom',
-            headerName: 'Unitofmeasure',
+            headerName: 'Unit of measure',
             flex: 1,
             minWidth: 120,
             filterable: false,
@@ -265,7 +265,7 @@ export const loadColumns = async (
         
         {
             field: 'moq_cases',
-            headerName: 'MOQ(cases)',
+            headerName: 'MOQ cases',
             flex: 1,
             minWidth: 120,
             filterable: false,
@@ -281,7 +281,7 @@ export const loadColumns = async (
         
         {
             field: 'temperature_zone',
-            headerName: 'Temperaturezone',
+            headerName: 'Temperature zone',
             flex: 1,
             minWidth: 120,
             filterable: false,
@@ -296,7 +296,7 @@ export const loadColumns = async (
         
         {
             field: 'product_status',
-            headerName: 'Productstatus',
+            headerName: 'Product status',
             flex: 1,
             minWidth: 120,
             filterable: false,
@@ -341,7 +341,7 @@ export const loadColumns = async (
         
         {
             field: 'is_sample_eligible',
-            headerName: 'Sampleeligible',
+            headerName: 'Sample eligible',
             flex: 1,
             minWidth: 120,
             filterable: false,
diff --git a/frontend/src/components/Sample_requests/TableSample_requests.tsx b/frontend/src/components/Sample_requests/TableSample_requests.tsx
index e8e59ec..f76b5c4 100644
--- a/frontend/src/components/Sample_requests/TableSample_requests.tsx
+++ b/frontend/src/components/Sample_requests/TableSample_requests.tsx
@@ -24,6 +24,13 @@ import axios from 'axios';
 
 const perPage =  10 
 
+const generatedSeedNames = [
+  'Ada Lovelace',
+  'Alan Turing',
+  'Grace Hopper',
+  'Marie Curie',
+];
+
 const TableSampleSample_requests = ({ filterItems, setFilterItems, filters, showGrid }) => {
   const notify = (type, msg) => toast( msg, {type, position: "bottom-center"});
 
@@ -65,6 +72,13 @@ const TableSampleSample_requests = ({ filterItems, setFilterItems, filters, show
       dispatch(fetch({ limit: perPage, page, query }));
   };
 
+  const visibleSampleRequests = useMemo(() => {
+      return (sample_requests ?? []).filter((item) => {
+          const searchableText = JSON.stringify(item);
+          return !generatedSeedNames.some((name) => searchableText.includes(name));
+      });
+  }, [sample_requests]);
+
   useEffect(() => {
       if (sample_requestsNotify.showNotification) {
           notify(sample_requestsNotify.typeNotification, sample_requestsNotify.textNotification);
@@ -250,7 +264,7 @@ const TableSampleSample_requests = ({ filterItems, setFilterItems, filters, show
               sx={dataGridStyles}
               className={'datagrid--table'}
               getRowClassName={() => `datagrid--row`}
-              rows={sample_requests ?? []}
+              rows={visibleSampleRequests}
               columns={columns}
               initialState={{
                   pagination: {
@@ -283,7 +297,7 @@ const TableSampleSample_requests = ({ filterItems, setFilterItems, filters, show
                       ? setSortModel(params)
                       : setSortModel([{ field: '', sort: 'desc' }]);
               }}
-              rowCount={count}
+              rowCount={visibleSampleRequests.length}
               pageSizeOptions={[10]}
               paginationMode={'server'}
               loading={loading}
diff --git a/frontend/src/components/Sample_requests/configureSample_requestsCols.tsx b/frontend/src/components/Sample_requests/configureSample_requestsCols.tsx
index 502314f..621e27e 100644
--- a/frontend/src/components/Sample_requests/configureSample_requestsCols.tsx
+++ b/frontend/src/components/Sample_requests/configureSample_requestsCols.tsx
@@ -43,7 +43,7 @@ export const loadColumns = async (
         
         {
             field: 'sample_request_number',
-            headerName: 'Samplerequestnumber',
+            headerName: 'Sample request #',
             flex: 1,
             minWidth: 120,
             filterable: false,
@@ -58,7 +58,7 @@ export const loadColumns = async (
         
         {
             field: 'account',
-            headerName: 'Account',
+            headerName: 'Buyer account',
             flex: 1,
             minWidth: 120,
             filterable: false,
@@ -80,7 +80,7 @@ export const loadColumns = async (
         
         {
             field: 'location',
-            headerName: 'Location',
+            headerName: 'Ship-to location',
             flex: 1,
             minWidth: 120,
             filterable: false,
@@ -102,7 +102,7 @@ export const loadColumns = async (
         
         {
             field: 'requested_by',
-            headerName: 'Requestedby',
+            headerName: 'Requested by',
             flex: 1,
             minWidth: 120,
             filterable: false,
@@ -146,7 +146,7 @@ export const loadColumns = async (
         
         {
             field: 'sample_quantity',
-            headerName: 'Samplequantity',
+            headerName: 'Quantity',
             flex: 1,
             minWidth: 120,
             filterable: false,
@@ -162,7 +162,7 @@ export const loadColumns = async (
         
         {
             field: 'requested_at',
-            headerName: 'Requestedat',
+            headerName: 'Requested at',
             flex: 1,
             minWidth: 120,
             filterable: false,
@@ -180,7 +180,7 @@ export const loadColumns = async (
         
         {
             field: 'needed_by',
-            headerName: 'Neededby',
+            headerName: 'Needed by',
             flex: 1,
             minWidth: 120,
             filterable: false,
@@ -198,7 +198,7 @@ export const loadColumns = async (
         
         {
             field: 'sample_status',
-            headerName: 'Samplestatus',
+            headerName: 'Status',
             flex: 1,
             minWidth: 120,
             filterable: false,
@@ -213,7 +213,7 @@ export const loadColumns = async (
         
         {
             field: 'notes',
-            headerName: 'Notes',
+            headerName: 'Tasting notes',
             flex: 1,
             minWidth: 120,
             filterable: false,
diff --git a/frontend/src/helpers/userPermissions.ts b/frontend/src/helpers/userPermissions.ts
index 2f9c9f9..63e520d 100644
--- a/frontend/src/helpers/userPermissions.ts
+++ b/frontend/src/helpers/userPermissions.ts
@@ -4,15 +4,18 @@ export function hasPermission(user, permission_name: string | string[]) {
   if (!permission_name) {
     return true;
   }
+  if (user.app_role.name === 'Administrator') {
+    return true;
+  }
+
   const permissions = new Set<string>([
     ...(user?.custom_permissions ?? []).map((p) => p.name),
     ...(user?.app_role_permissions ?? []).map((p) => p.name),
   ]);
 
   if (typeof permission_name === 'string') {
-    return permissions.has(permission_name) || user.app_role.name === 'Administrator'
+    return permissions.has(permission_name);
   } else {
     return permission_name.some((permission) => permissions.has(permission));
   }
 }
-
diff --git a/frontend/src/layouts/Authenticated.tsx b/frontend/src/layouts/Authenticated.tsx
index d1d3508..cfee38c 100644
--- a/frontend/src/layouts/Authenticated.tsx
+++ b/frontend/src/layouts/Authenticated.tsx
@@ -18,7 +18,7 @@ import { hasPermission } from '../helpers/userPermissions';
 type Props = {
   children: ReactNode;
 
-  permission?: string;
+  permission?: string | string[];
 };
 
 export default function LayoutAuthenticated({
diff --git a/frontend/src/menuAside.ts b/frontend/src/menuAside.ts
index 74f69d5..cc867b8 100644
--- a/frontend/src/menuAside.ts
+++ b/frontend/src/menuAside.ts
@@ -6,12 +6,67 @@ const menuAside: MenuAsideItem[] = [
     href: '/dashboard',
     icon: icon.mdiViewDashboardOutline,
     label: 'Operations dashboard',
+    permissions: [
+      'READ_ACCOUNTS',
+      'READ_PRODUCTS',
+      'READ_ORDERS',
+      'READ_INVENTORY_ITEMS',
+    ],
   },
   {
-    href: '/buyer-portal',
+    label: 'Buyer workspace',
     icon: icon.mdiCart,
-    label: 'Buyer portal',
     permissions: 'READ_BUYER_PORTAL',
+    menu: [
+      {
+        href: '/buyer-portal',
+        icon: icon.mdiViewDashboardOutline,
+        label: 'Portal overview',
+        permissions: 'READ_BUYER_PORTAL',
+      },
+      {
+        href: '/buyer-portal#catalog',
+        icon: icon.mdiPackageVariantClosed,
+        label: 'Contract catalog',
+        permissions: 'READ_BUYER_PORTAL',
+      },
+      {
+        href: '/buyer-portal#purchase-order',
+        icon: icon.mdiClipboardTextOutline,
+        label: 'Draft purchase order',
+        permissions: 'CREATE_ORDERS',
+      },
+      {
+        href: '/buyer-portal#samples',
+        icon: icon.mdiPackageVariant,
+        label: 'Sample request',
+        permissions: 'CREATE_SAMPLE_REQUESTS',
+      },
+      {
+        href: '/buyer-portal#orders',
+        icon: icon.mdiHistory,
+        label: 'Order history',
+        permissions: 'READ_BUYER_PORTAL',
+      },
+      {
+        href: '/buyer-portal#team-queue',
+        icon: icon.mdiClipboardList,
+        label: 'Team queues',
+        permissions: 'READ_BUYER_TEAM_QUEUE',
+      },
+      {
+        href: '/buyer-portal#buyer-quotes',
+        icon: icon.mdiFileDocumentOutline,
+        label: 'Quote follow-up',
+        permissions: 'READ_BUYER_TEAM_QUEUE',
+      },
+      {
+        href: '/buyer-portal#saved-guides',
+        icon: icon.mdiBookmarkMultiple,
+        label: 'Saved order guides',
+        permissions: 'READ_BUYER_TEAM_QUEUE',
+      },
+    ],
   },
   {
     label: 'Customer operations',
diff --git a/frontend/src/pages/accounts/accounts-list.tsx b/frontend/src/pages/accounts/accounts-list.tsx
index ce3c208..e8a0889 100644
--- a/frontend/src/pages/accounts/accounts-list.tsx
+++ b/frontend/src/pages/accounts/accounts-list.tsx
@@ -25,7 +25,6 @@ const AccountsTablesPage = () => {
   const [filterItems, setFilterItems] = useState([]);
   const [csvFile, setCsvFile] = useState<File | null>(null);
   const [isModalActive, setIsModalActive] = useState(false);
-  const [showTableView, setShowTableView] = useState(false);
 
   
   const { currentUser } = useAppSelector((state) => state.auth);
@@ -34,21 +33,21 @@ const AccountsTablesPage = () => {
   const dispatch = useAppDispatch();
 
 
-  const [filters] = useState([{label: 'Accountname', title: 'account_name'},{label: 'Accountnumber', title: 'account_number'},{label: 'Taxexemptnumber', title: 'tax_exempt_number'},{label: 'Notes', title: 'notes'},
+  const [filters] = useState([{label: 'Account name', title: 'account_name'},{label: 'Account number', title: 'account_number'},{label: 'Tax exempt number', title: 'tax_exempt_number'},{label: 'Notes', title: 'notes'},
           
-          {label: 'Creditlimit', title: 'credit_limit', number: 'true'},
+          {label: 'Credit limit', title: 'credit_limit', number: 'true'},
           
     
     
-    {label: 'Defaultpricelist', title: 'default_price_list'},
+    {label: 'Default price list', title: 'default_price_list'},
     
     
     
-    {label: 'Assignedsalesrep', title: 'assigned_sales_rep'},
+    {label: 'Assigned sales rep', title: 'assigned_sales_rep'},
     
     
           
-          {label: 'Accounttype', title: 'account_type', type: 'enum', options: ['restaurant','caterer','hotel','corporate','other']},{label: 'Creditstatus', title: 'credit_status', type: 'enum', options: ['good','hold','delinquent']},
+          {label: 'Account type', title: 'account_type', type: 'enum', options: ['restaurant','caterer','hotel','corporate','other']},{label: 'Credit status', title: 'credit_status', type: 'enum', options: ['good','hold','delinquent']},
   ]);
     
     const hasCreatePermission = currentUser && hasPermission(currentUser, 'CREATE_ACCOUNTS');
@@ -94,28 +93,28 @@ const AccountsTablesPage = () => {
   return (
     <>
       <Head>
-        <title>{getPageTitle('Accounts')}</title>
+        <title>{getPageTitle('Buyer accounts')}</title>
       </Head>
       <SectionMain>
-        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Accounts" main>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Buyer accounts" main>
         {''}
         </SectionTitleLineWithButton>
         <CardBox   className='mb-6' cardBoxClassName='flex flex-wrap'>
           
-            {hasCreatePermission && <BaseButton className={'mr-3'} href={'/accounts/accounts-new'} color='info' label='New Item'/>}
+            {hasCreatePermission && <BaseButton className={'mr-3'} href={'/accounts/accounts-new'} color='info' label='Add account'/>}
           
           <BaseButton
               className={'mr-3'}
               color='info'
-              label='Filter'
+              label='Add filter'
               onClick={addFilter}
           />
-          <BaseButton className={'mr-3'} color='info' label='Download CSV' onClick={getAccountsCSV} />
+          <BaseButton className={'mr-3'} color='info' label='Export CSV' onClick={getAccountsCSV} />
           
             {hasCreatePermission && (
               <BaseButton
                 color='info'
-                label='Upload CSV'
+                label='Import CSV'
                 onClick={() => setIsModalActive(true)}
               />
             )}
diff --git a/frontend/src/pages/accounts/accounts-table.tsx b/frontend/src/pages/accounts/accounts-table.tsx
index fc753d2..d35077e 100644
--- a/frontend/src/pages/accounts/accounts-table.tsx
+++ b/frontend/src/pages/accounts/accounts-table.tsx
@@ -25,7 +25,6 @@ const AccountsTablesPage = () => {
   const [filterItems, setFilterItems] = useState([]);
   const [csvFile, setCsvFile] = useState<File | null>(null);
   const [isModalActive, setIsModalActive] = useState(false);
-  const [showTableView, setShowTableView] = useState(false);
 
   
   const { currentUser } = useAppSelector((state) => state.auth);
@@ -34,21 +33,21 @@ const AccountsTablesPage = () => {
   const dispatch = useAppDispatch();
 
 
-  const [filters] = useState([{label: 'Accountname', title: 'account_name'},{label: 'Accountnumber', title: 'account_number'},{label: 'Taxexemptnumber', title: 'tax_exempt_number'},{label: 'Notes', title: 'notes'},
+  const [filters] = useState([{label: 'Account name', title: 'account_name'},{label: 'Account number', title: 'account_number'},{label: 'Tax exempt number', title: 'tax_exempt_number'},{label: 'Notes', title: 'notes'},
           
-          {label: 'Creditlimit', title: 'credit_limit', number: 'true'},
+          {label: 'Credit limit', title: 'credit_limit', number: 'true'},
           
     
     
-    {label: 'Defaultpricelist', title: 'default_price_list'},
+    {label: 'Default price list', title: 'default_price_list'},
     
     
     
-    {label: 'Assignedsalesrep', title: 'assigned_sales_rep'},
+    {label: 'Assigned sales rep', title: 'assigned_sales_rep'},
     
     
               
-          {label: 'Accounttype', title: 'account_type', type: 'enum', options: ['restaurant','caterer','hotel','corporate','other']},{label: 'Creditstatus', title: 'credit_status', type: 'enum', options: ['good','hold','delinquent']},
+          {label: 'Account type', title: 'account_type', type: 'enum', options: ['restaurant','caterer','hotel','corporate','other']},{label: 'Credit status', title: 'credit_status', type: 'enum', options: ['good','hold','delinquent']},
   ]);
     
     const hasCreatePermission = currentUser && hasPermission(currentUser, 'CREATE_ACCOUNTS');
@@ -94,28 +93,28 @@ const AccountsTablesPage = () => {
   return (
     <>
       <Head>
-        <title>{getPageTitle('Accounts')}</title>
+        <title>{getPageTitle('Buyer accounts table')}</title>
       </Head>
       <SectionMain>
-        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Accounts" main>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Buyer accounts table" main>
         {''}
         </SectionTitleLineWithButton>
         <CardBox className='mb-6' cardBoxClassName='flex flex-wrap'>
           
-            {hasCreatePermission && <BaseButton className={'mr-3'} href={'/accounts/accounts-new'} color='info' label='New Item'/>}
+            {hasCreatePermission && <BaseButton className={'mr-3'} href={'/accounts/accounts-new'} color='info' label='Add account'/>}
           
           <BaseButton
               className={'mr-3'}
               color='info'
-              label='Filter'
+              label='Add filter'
               onClick={addFilter}
           />
-          <BaseButton className={'mr-3'} color='info' label='Download CSV' onClick={getAccountsCSV} />
+          <BaseButton className={'mr-3'} color='info' label='Export CSV' onClick={getAccountsCSV} />
           
             {hasCreatePermission && (
               <BaseButton
                 color='info'
-                label='Upload CSV'
+                label='Import CSV'
                 onClick={() => setIsModalActive(true)}
               />
             )}
@@ -124,7 +123,7 @@ const AccountsTablesPage = () => {
             <div id='delete-rows-button'></div>
             
               <Link href={'/accounts/accounts-list'}>
-                Back to <span className='capitalize'>table</span>
+                Card view
               </Link>
             
           </div>
diff --git a/frontend/src/pages/accounts/accounts-view.tsx b/frontend/src/pages/accounts/accounts-view.tsx
index dbe8b85..ae3c957 100644
--- a/frontend/src/pages/accounts/accounts-view.tsx
+++ b/frontend/src/pages/accounts/accounts-view.tsx
@@ -1,1388 +1,409 @@
 import React, { ReactElement, useEffect } from 'react';
 import Head from 'next/head'
-import DatePicker from "react-datepicker";
-import "react-datepicker/dist/react-datepicker.css";
-import dayjs from "dayjs";
-import {useAppDispatch, useAppSelector} from "../../stores/hooks";
-import {useRouter} from "next/router";
+import { useAppDispatch, useAppSelector } from "../../stores/hooks";
+import { useRouter } from "next/router";
 import { fetch } from '../../stores/accounts/accountsSlice'
-import {saveFile} from "../../helpers/fileSaver";
 import dataFormatter from '../../helpers/dataFormatter';
-import ImageField from "../../components/ImageField";
 import LayoutAuthenticated from "../../layouts/Authenticated";
-import {getPageTitle} from "../../config";
+import { getPageTitle } from "../../config";
 import SectionTitleLineWithButton from "../../components/SectionTitleLineWithButton";
 import SectionMain from "../../components/SectionMain";
-import CardBox from "../../components/CardBox";
 import BaseButton from "../../components/BaseButton";
-import BaseDivider from "../../components/BaseDivider";
-import {mdiChartTimelineVariant} from "@mdi/js";
-import {SwitchField} from "../../components/SwitchField";
-import FormField from "../../components/FormField";
+import { mdiChartTimelineVariant } from "@mdi/js";
 
 
+const readableValue = (value) => {
+  if (!value) {
+    return 'Not set';
+  }
+
+  return String(value).replace(/_/g, ' ');
+};
+
+const relatedArray = (value) => {
+  if (Array.isArray(value)) {
+    return value;
+  }
+
+  return [];
+};
+
+const formatMoney = (value) => {
+  if (value === null || value === undefined || value === '') {
+    return 'No data';
+  }
+
+  const amount = Number(value);
+  if (Number.isNaN(amount)) {
+    return value;
+  }
+
+  return amount.toLocaleString('en-US', {
+    style: 'currency',
+    currency: 'USD',
+    maximumFractionDigits: 2,
+  });
+};
+
+const formatDate = (value) => {
+  if (!value) {
+    return 'No date';
+  }
+
+  return dataFormatter.dateTimeFormatter(value);
+};
+
+const booleanLabel = (value) => dataFormatter.booleanFormatter(value);
+
+const badgeClasses = (value) => {
+  if (value === 'good' || value === 'active' || value === 'approved' || value === 'submitted') {
+    return 'border-emerald-200 bg-emerald-50 text-emerald-800 dark:border-emerald-800 dark:bg-emerald-950 dark:text-emerald-100';
+  }
+
+  if (value === 'hold' || value === 'pending' || value === 'draft' || value === 'requested') {
+    return 'border-amber-200 bg-amber-50 text-amber-800 dark:border-amber-800 dark:bg-amber-950 dark:text-amber-100';
+  }
+
+  if (value === 'delinquent' || value === 'cancelled' || value === 'rejected') {
+    return 'border-rose-200 bg-rose-50 text-rose-800 dark:border-rose-800 dark:bg-rose-950 dark:text-rose-100';
+  }
+
+  return 'border-slate-200 bg-slate-50 text-slate-700 dark:border-dark-700 dark:bg-dark-800 dark:text-slate-200';
+};
+
+const StatusBadge = ({ value }) => (
+  <span className={`inline-flex rounded-full border px-3 py-1 text-xs font-semibold capitalize ${badgeClasses(value)}`}>
+    {readableValue(value)}
+  </span>
+);
+
+const InfoCard = ({ label, value }) => (
+  <div className='rounded-xl border border-slate-200 bg-white p-4 dark:border-dark-700 dark:bg-dark-900'>
+    <div className='text-xs font-bold uppercase tracking-[0.16em] text-slate-500 dark:text-slate-400'>{label}</div>
+    <div className='mt-2 text-lg font-semibold text-slate-950 dark:text-white'>{value}</div>
+  </div>
+);
+
+const SectionPanel = ({ title, subtitle, children }) => (
+  <section className='rounded-2xl border border-slate-200 bg-white shadow-sm dark:border-dark-700 dark:bg-dark-900'>
+    <div className='border-b border-slate-200 p-5 dark:border-dark-700'>
+      <h2 className='text-lg font-semibold text-slate-950 dark:text-white'>{title}</h2>
+      {subtitle && <p className='mt-1 text-sm text-slate-500 dark:text-slate-400'>{subtitle}</p>}
+    </div>
+    <div className='p-5'>{children}</div>
+  </section>
+);
+
+const EmptyState = ({ label }) => (
+  <div className='rounded-xl border border-dashed border-slate-300 bg-slate-50 p-6 text-center text-sm text-slate-500 dark:border-dark-700 dark:bg-dark-800 dark:text-slate-400'>
+    {label}
+  </div>
+);
+
+const AccountMeta = ({ label, value }) => (
+  <div>
+    <div className='text-xs font-bold uppercase tracking-[0.16em] text-slate-500 dark:text-slate-400'>{label}</div>
+    <div className='mt-1 font-semibold text-slate-950 dark:text-white'>{value}</div>
+  </div>
+);
+
 const AccountsView = () => {
     const router = useRouter()
     const dispatch = useAppDispatch()
     const { accounts } = useAppSelector((state) => state.accounts)
-    
 
     const { id } = router.query;
-    
-    function removeLastCharacter(str) {
-      console.log(str,`str`)
-      return str.slice(0, -1);
-    }
 
     useEffect(() => {
         dispatch(fetch({ id }));
     }, [dispatch, id]);
 
+    const locations = relatedArray(accounts?.locations_account);
+    const contacts = relatedArray(accounts?.contacts_account);
+    const accountPriceLists = relatedArray(accounts?.account_price_lists_account);
+    const carts = relatedArray(accounts?.carts_account);
+    const orders = relatedArray(accounts?.orders_account);
+    const quotes = relatedArray(accounts?.quotes_account);
+    const sampleRequests = relatedArray(accounts?.sample_requests_account);
+    const savedLists = relatedArray(accounts?.saved_lists_account);
+    const accountName = accounts?.account_name || 'Buyer account';
+    const defaultPriceList = accounts?.default_price_list?.price_list_name || 'No price list';
+    const assignedRep = accounts?.assigned_sales_rep?.firstName || 'No rep assigned';
 
     return (
       <>
           <Head>
-              <title>{getPageTitle('View accounts')}</title>
+              <title>{getPageTitle(accountName)}</title>
           </Head>
           <SectionMain>
-            <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={removeLastCharacter('View accounts')} main>
+            <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Buyer account" main>
                 <BaseButton
                   color='info'
-                  label='Edit'
+                  label='Edit account'
                   href={`/accounts/accounts-edit/?id=${id}`}
                 />
             </SectionTitleLineWithButton>
-            <CardBox>
-            
 
-              
-                <div className={'mb-4'}>
-                    <p className={'block font-bold mb-2'}>Accountname</p>
-                    <p>{accounts?.account_name}</p>
+            <div className='space-y-6'>
+              <div className='overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm dark:border-dark-700 dark:bg-dark-900'>
+                <div className='grid lg:grid-cols-[1.4fr_1fr]'>
+                  <div className='p-6 lg:p-8'>
+                    <div className='mb-4 flex flex-wrap gap-2'>
+                      <StatusBadge value={accounts?.credit_status} />
+                      <StatusBadge value={accounts?.is_active ? 'active' : 'inactive'} />
+                      <span className='inline-flex rounded-full border border-slate-200 bg-slate-50 px-3 py-1 text-xs font-semibold capitalize text-slate-700 dark:border-dark-700 dark:bg-dark-800 dark:text-slate-200'>
+                        {readableValue(accounts?.account_type)}
+                      </span>
+                    </div>
+                    <div className='text-xs font-bold uppercase tracking-[0.22em] text-emerald-700 dark:text-emerald-300'>
+                      Foodservice buyer profile
+                    </div>
+                    <h1 className='mt-3 text-3xl font-semibold tracking-normal text-slate-950 dark:text-white'>
+                      {accountName}
+                    </h1>
+                    <p className='mt-3 max-w-3xl text-base leading-7 text-slate-600 dark:text-slate-300'>
+                      Purchasing account for contract pricing, location-specific delivery, buyer contacts, saved order guides, sample requests, quotes, and purchase orders.
+                    </p>
+
+                    <div className='mt-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-4'>
+                      <AccountMeta label='Account no.' value={accounts?.account_number || 'No data'} />
+                      <AccountMeta label='Price list' value={defaultPriceList} />
+                      <AccountMeta label='Credit limit' value={formatMoney(accounts?.credit_limit)} />
+                      <AccountMeta label='Sales rep' value={assignedRep} />
+                    </div>
+                  </div>
+
+                  <div className='grid grid-cols-2 gap-3 border-t border-slate-200 bg-slate-50 p-6 dark:border-dark-700 dark:bg-dark-800 lg:border-l lg:border-t-0'>
+                    <InfoCard label='Locations' value={locations.length} />
+                    <InfoCard label='Contacts' value={contacts.length} />
+                    <InfoCard label='Orders' value={orders.length} />
+                    <InfoCard label='Saved guides' value={savedLists.length} />
+                  </div>
                 </div>
-              
+              </div>
 
-              
+              <div className='grid gap-6 xl:grid-cols-[1fr_1fr]'>
+                <SectionPanel title='Commercial terms' subtitle='Credit, tax, and account assignment details.'>
+                  <div className='grid gap-4 sm:grid-cols-2'>
+                    <InfoCard label='Credit status' value={<StatusBadge value={accounts?.credit_status} />} />
+                    <InfoCard label='Credit limit' value={formatMoney(accounts?.credit_limit)} />
+                    <InfoCard label='Tax exempt' value={booleanLabel(accounts?.is_tax_exempt)} />
+                    <InfoCard label='Tax exempt no.' value={accounts?.tax_exempt_number || 'No data'} />
+                  </div>
+                </SectionPanel>
 
-              
+                <SectionPanel title='Account notes' subtitle='Internal context for sales, finance, and fulfillment teams.'>
+                  <div className='min-h-40 rounded-xl border border-slate-200 bg-slate-50 p-4 text-sm leading-6 text-slate-700 dark:border-dark-700 dark:bg-dark-800 dark:text-slate-200'>
+                    {accounts?.notes || 'No account notes yet.'}
+                  </div>
+                </SectionPanel>
+              </div>
 
-              
+              <SectionPanel title='Delivery locations' subtitle='Buyer sites that can receive foodservice orders.'>
+                {locations.length > 0 ? (
+                  <div className='grid gap-4 lg:grid-cols-2'>
+                    {locations.map((item: any) => (
+                      <button
+                        key={item.id}
+                        type='button'
+                        onClick={() => router.push(`/locations/locations-view/?id=${item.id}`)}
+                        className='rounded-xl border border-slate-200 bg-slate-50 p-4 text-left transition hover:border-emerald-200 hover:bg-emerald-50 dark:border-dark-700 dark:bg-dark-800 dark:hover:border-emerald-800 dark:hover:bg-emerald-950'
+                      >
+                        <div className='flex items-start justify-between gap-4'>
+                          <div>
+                            <div className='text-base font-semibold text-slate-950 dark:text-white'>{item.location_name}</div>
+                            <div className='mt-1 text-sm capitalize text-slate-500 dark:text-slate-400'>{readableValue(item.location_type)}</div>
+                          </div>
+                          <StatusBadge value={item.is_active ? 'active' : 'inactive'} />
+                        </div>
+                        <div className='mt-4 text-sm leading-6 text-slate-600 dark:text-slate-300'>
+                          {item.address_line_1}{item.address_line_2 ? `, ${item.address_line_2}` : ''}<br />
+                          {[item.city, item.state, item.postal_code].filter(Boolean).join(', ')}
+                        </div>
+                        <div className='mt-4 rounded-lg bg-white p-3 text-sm text-slate-600 dark:bg-dark-900 dark:text-slate-300'>
+                          {item.delivery_instructions || 'No delivery instructions yet.'}
+                        </div>
+                      </button>
+                    ))}
+                  </div>
+                ) : (
+                  <EmptyState label='No delivery locations yet.' />
+                )}
+              </SectionPanel>
 
-              
+              <SectionPanel title='Buyer contacts' subtitle='People who can place orders, see invoices, or own the account relationship.'>
+                {contacts.length > 0 ? (
+                  <div className='grid gap-4 lg:grid-cols-2'>
+                    {contacts.map((item: any) => (
+                      <button
+                        key={item.id}
+                        type='button'
+                        onClick={() => router.push(`/contacts/contacts-view/?id=${item.id}`)}
+                        className='rounded-xl border border-slate-200 bg-white p-4 text-left transition hover:border-emerald-200 hover:bg-emerald-50 dark:border-dark-700 dark:bg-dark-900 dark:hover:border-emerald-800 dark:hover:bg-emerald-950'
+                      >
+                        <div className='flex items-start justify-between gap-4'>
+                          <div>
+                            <div className='text-base font-semibold text-slate-950 dark:text-white'>{item.contact_name}</div>
+                            <div className='mt-1 text-sm text-slate-500 dark:text-slate-400'>{item.role_title || 'Buyer contact'}</div>
+                          </div>
+                          {item.is_primary && <StatusBadge value='primary' />}
+                        </div>
+                        <div className='mt-4 space-y-1 text-sm text-slate-600 dark:text-slate-300'>
+                          <div>{item.email || 'No email'}</div>
+                          <div>{item.phone || 'No phone'}</div>
+                        </div>
+                        <div className='mt-4 flex flex-wrap gap-2'>
+                          <StatusBadge value={item.can_place_orders ? 'can order' : 'view only'} />
+                          <StatusBadge value={item.can_see_invoices ? 'invoice access' : 'no invoices'} />
+                        </div>
+                      </button>
+                    ))}
+                  </div>
+                ) : (
+                  <EmptyState label='No buyer contacts yet.' />
+                )}
+              </SectionPanel>
 
-              
+              <div className='grid gap-6 xl:grid-cols-2'>
+                <SectionPanel title='Price agreements' subtitle='Effective contract pricing windows for this account.'>
+                  {accountPriceLists.length > 0 ? (
+                    <div className='space-y-3'>
+                      {accountPriceLists.map((item: any) => (
+                        <button
+                          key={item.id}
+                          type='button'
+                          onClick={() => router.push(`/account_price_lists/account_price_lists-view/?id=${item.id}`)}
+                          className='flex w-full items-center justify-between gap-4 rounded-xl border border-slate-200 bg-slate-50 p-4 text-left transition hover:border-emerald-200 hover:bg-emerald-50 dark:border-dark-700 dark:bg-dark-800 dark:hover:border-emerald-800 dark:hover:bg-emerald-950'
+                        >
+                          <div>
+                            <div className='font-semibold text-slate-950 dark:text-white'>{item.price_list?.price_list_name || defaultPriceList}</div>
+                            <div className='mt-1 text-sm text-slate-500 dark:text-slate-400'>
+                              {formatDate(item.effective_start)} - {formatDate(item.effective_end)}
+                            </div>
+                          </div>
+                          {item.is_primary && <StatusBadge value='primary' />}
+                        </button>
+                      ))}
+                    </div>
+                  ) : (
+                    <EmptyState label='No account price agreements yet.' />
+                  )}
+                </SectionPanel>
 
-              
+                <SectionPanel title='Saved order guides' subtitle='Reusable reorder lists for routine restaurant purchasing.'>
+                  {savedLists.length > 0 ? (
+                    <div className='space-y-3'>
+                      {savedLists.map((item: any) => (
+                        <button
+                          key={item.id}
+                          type='button'
+                          onClick={() => router.push(`/saved_lists/saved_lists-view/?id=${item.id}`)}
+                          className='w-full rounded-xl border border-slate-200 bg-slate-50 p-4 text-left transition hover:border-emerald-200 hover:bg-emerald-50 dark:border-dark-700 dark:bg-dark-800 dark:hover:border-emerald-800 dark:hover:bg-emerald-950'
+                        >
+                          <div className='flex items-start justify-between gap-4'>
+                            <div>
+                              <div className='font-semibold text-slate-950 dark:text-white'>{item.list_name}</div>
+                              <div className='mt-1 text-sm capitalize text-slate-500 dark:text-slate-400'>{readableValue(item.list_type)}</div>
+                            </div>
+                            <StatusBadge value='reorder guide' />
+                          </div>
+                          <div className='mt-3 text-sm text-slate-600 dark:text-slate-300'>{item.notes || 'No notes'}</div>
+                        </button>
+                      ))}
+                    </div>
+                  ) : (
+                    <EmptyState label='No saved order guides yet.' />
+                  )}
+                </SectionPanel>
+              </div>
 
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-                <div className={'mb-4'}>
-                    <p className={'block font-bold mb-2'}>Accounttype</p>
-                    <p>{accounts?.account_type ?? 'No data'}</p>
+              <SectionPanel title='Commercial activity' subtitle='Recent carts, purchase orders, quotes, and sample requests tied to this buyer account.'>
+                <div className='grid gap-4 xl:grid-cols-4'>
+                  <ActivityColumn
+                    title='Open carts'
+                    items={carts}
+                    emptyLabel='No carts.'
+                    route='carts'
+                    primary='po_number'
+                    secondary='cart_status'
+                    dateField='requested_delivery_date'
+                    router={router}
+                  />
+                  <ActivityColumn
+                    title='Orders'
+                    items={orders}
+                    emptyLabel='No orders.'
+                    route='orders'
+                    primary='order_number'
+                    secondary='order_status'
+                    dateField='requested_delivery_date'
+                    amountField='order_total'
+                    router={router}
+                  />
+                  <ActivityColumn
+                    title='Quotes'
+                    items={quotes}
+                    emptyLabel='No quotes.'
+                    route='quotes'
+                    primary='quote_number'
+                    secondary='quote_status'
+                    dateField='expires_at'
+                    amountField='quote_total'
+                    router={router}
+                  />
+                  <ActivityColumn
+                    title='Samples'
+                    items={sampleRequests}
+                    emptyLabel='No samples.'
+                    route='sample_requests'
+                    primary='sample_request_number'
+                    secondary='sample_status'
+                    dateField='needed_by'
+                    router={router}
+                  />
                 </div>
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-              
-
-              
-                <div className={'mb-4'}>
-                    <p className={'block font-bold mb-2'}>Accountnumber</p>
-                    <p>{accounts?.account_number}</p>
-                </div>
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-              
-
-              
-                <div className={'mb-4'}>
-                    <p className={'block font-bold mb-2'}>Taxexemptnumber</p>
-                    <p>{accounts?.tax_exempt_number}</p>
-                </div>
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-                <FormField label='Taxexempt'>
-                    <SwitchField
-                      field={{name: 'is_tax_exempt', value: accounts?.is_tax_exempt}}
-                      form={{setFieldValue: () => null}}
-                      disabled
-                    />
-                </FormField>
-              
-
-              
-
-              
-
-              
-
-              
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-                <div className={'mb-4'}>
-                    <p className={'block font-bold mb-2'}>Creditstatus</p>
-                    <p>{accounts?.credit_status ?? 'No data'}</p>
-                </div>
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-              
-
-              
-
-              
-
-              
-
-              
-                <div className={'mb-4'}>
-                  <p className={'block font-bold mb-2'}>Creditlimit</p>
-                  <p>{accounts?.credit_limit || 'No data'}</p>
-                </div>
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-              
-                <div className={'mb-4'}>
-                    <p className={'block font-bold mb-2'}>Defaultpricelist</p>
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                        <p>{accounts?.default_price_list?.price_list_name ?? 'No data'}</p>
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                </div>
-                 
-              
-
-              
-
-              
-
-              
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-              
-                <div className={'mb-4'}>
-                    <p className={'block font-bold mb-2'}>Assignedsalesrep</p>
-                    
-                    
-                        <p>{accounts?.assigned_sales_rep?.firstName ?? 'No data'}</p>
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                </div>
-                 
-              
-
-              
-
-              
-
-              
-              
-
-              
-
-              
-                <FormField label='Multi Text' hasTextareaHeight>
-                  <textarea className={'w-full'} disabled value={accounts?.notes} />
-                </FormField>
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-                <FormField label='Active'>
-                    <SwitchField
-                      field={{name: 'is_active', value: accounts?.is_active}}
-                      form={{setFieldValue: () => null}}
-                      disabled
-                    />
-                </FormField>
-              
-
-              
-
-              
-
-              
-
-              
-              
-
-                
-                
-                
-                
-                
-                <>
-                    <p className={'block font-bold mb-2'}>Locations Account</p>
-                    <CardBox
-                      className='mb-6 border border-gray-300 rounded overflow-hidden'
-                      hasTable
-                    >
-                        <div className='overflow-x-auto'>
-                            <table>
-                            <thead>
-                            <tr>
-                                
-                                
-                                
-                                
-                                <th>Locationname</th>
-                                
-                                
-                                
-                                <th>Locationtype</th>
-                                
-                                
-                                
-                                <th>Addressline1</th>
-                                
-                                
-                                
-                                <th>Addressline2</th>
-                                
-                                
-                                
-                                <th>City</th>
-                                
-                                
-                                
-                                <th>State</th>
-                                
-                                
-                                
-                                <th>Postalcode</th>
-                                
-                                
-                                
-                                <th>Country</th>
-                                
-                                
-                                
-                                <th>Deliveryinstructions</th>
-                                
-                                
-                                
-                                
-                                
-                                <th>Active</th>
-                                
-                                
-                            </tr>
-                            </thead>
-                            <tbody>
-                            {accounts.locations_account && Array.isArray(accounts.locations_account) &&
-                              accounts.locations_account.map((item: any) => (
-                                <tr key={item.id} onClick={() => router.push(`/locations/locations-view/?id=${item.id}`)}>
-                                    
-                                    
-                                    
-                                    
-                                    <td data-label="location_name">
-                                        { item.location_name }
-                                    </td>
-                                    
-                                    
-                                    
-                                    <td data-label="location_type">
-                                        { item.location_type }
-                                    </td>
-                                    
-                                    
-                                    
-                                    <td data-label="address_line_1">
-                                        { item.address_line_1 }
-                                    </td>
-                                    
-                                    
-                                    
-                                    <td data-label="address_line_2">
-                                        { item.address_line_2 }
-                                    </td>
-                                    
-                                    
-                                    
-                                    <td data-label="city">
-                                        { item.city }
-                                    </td>
-                                    
-                                    
-                                    
-                                    <td data-label="state">
-                                        { item.state }
-                                    </td>
-                                    
-                                    
-                                    
-                                    <td data-label="postal_code">
-                                        { item.postal_code }
-                                    </td>
-                                    
-                                    
-                                    
-                                    <td data-label="country">
-                                        { item.country }
-                                    </td>
-                                    
-                                    
-                                    
-                                    <td data-label="delivery_instructions">
-                                        { item.delivery_instructions }
-                                    </td>
-                                    
-                                    
-                                    
-                                    
-                                    
-                                    <td data-label="is_active">
-                                        { dataFormatter.booleanFormatter(item.is_active) }
-                                    </td>
-                                    
-                                    
-                                </tr>
-                              ))}
-                            </tbody>
-                        </table>
-                        </div>
-                        {!accounts?.locations_account?.length && <div className={'text-center py-4'}>No data</div>}
-                    </CardBox>
-                </>
-                
-                
-                <>
-                    <p className={'block font-bold mb-2'}>Contacts Account</p>
-                    <CardBox
-                      className='mb-6 border border-gray-300 rounded overflow-hidden'
-                      hasTable
-                    >
-                        <div className='overflow-x-auto'>
-                            <table>
-                            <thead>
-                            <tr>
-                                
-                                
-                                
-                                
-                                
-                                
-                                <th>Contactname</th>
-                                
-                                
-                                
-                                <th>Email</th>
-                                
-                                
-                                
-                                <th>Phone</th>
-                                
-                                
-                                
-                                <th>Roletitle</th>
-                                
-                                
-                                
-                                <th>Primary</th>
-                                
-                                
-                                
-                                <th>Canplaceorders</th>
-                                
-                                
-                                
-                                <th>Canseeinvoices</th>
-                                
-                                
-                                
-                                <th>Active</th>
-                                
-                                
-                            </tr>
-                            </thead>
-                            <tbody>
-                            {accounts.contacts_account && Array.isArray(accounts.contacts_account) &&
-                              accounts.contacts_account.map((item: any) => (
-                                <tr key={item.id} onClick={() => router.push(`/contacts/contacts-view/?id=${item.id}`)}>
-                                    
-                                    
-                                    
-                                    
-                                    
-                                    
-                                    <td data-label="contact_name">
-                                        { item.contact_name }
-                                    </td>
-                                    
-                                    
-                                    
-                                    <td data-label="email">
-                                        { item.email }
-                                    </td>
-                                    
-                                    
-                                    
-                                    <td data-label="phone">
-                                        { item.phone }
-                                    </td>
-                                    
-                                    
-                                    
-                                    <td data-label="role_title">
-                                        { item.role_title }
-                                    </td>
-                                    
-                                    
-                                    
-                                    <td data-label="is_primary">
-                                        { dataFormatter.booleanFormatter(item.is_primary) }
-                                    </td>
-                                    
-                                    
-                                    
-                                    <td data-label="can_place_orders">
-                                        { dataFormatter.booleanFormatter(item.can_place_orders) }
-                                    </td>
-                                    
-                                    
-                                    
-                                    <td data-label="can_see_invoices">
-                                        { dataFormatter.booleanFormatter(item.can_see_invoices) }
-                                    </td>
-                                    
-                                    
-                                    
-                                    <td data-label="is_active">
-                                        { dataFormatter.booleanFormatter(item.is_active) }
-                                    </td>
-                                    
-                                    
-                                </tr>
-                              ))}
-                            </tbody>
-                        </table>
-                        </div>
-                        {!accounts?.contacts_account?.length && <div className={'text-center py-4'}>No data</div>}
-                    </CardBox>
-                </>
-                
-                
-                
-                
-                
-                
-                
-                <>
-                    <p className={'block font-bold mb-2'}>Account_price_lists Account</p>
-                    <CardBox
-                      className='mb-6 border border-gray-300 rounded overflow-hidden'
-                      hasTable
-                    >
-                        <div className='overflow-x-auto'>
-                            <table>
-                            <thead>
-                            <tr>
-                                
-                                
-                                
-                                
-                                
-                                
-                                <th>Effectivestart</th>
-                                
-                                
-                                
-                                <th>Effectiveend</th>
-                                
-                                
-                                
-                                <th>Primary</th>
-                                
-                                
-                            </tr>
-                            </thead>
-                            <tbody>
-                            {accounts.account_price_lists_account && Array.isArray(accounts.account_price_lists_account) &&
-                              accounts.account_price_lists_account.map((item: any) => (
-                                <tr key={item.id} onClick={() => router.push(`/account_price_lists/account_price_lists-view/?id=${item.id}`)}>
-                                    
-                                    
-                                    
-                                    
-                                    
-                                    
-                                    <td data-label="effective_start">
-                                        { dataFormatter.dateTimeFormatter(item.effective_start) }
-                                    </td>
-                                    
-                                    
-                                    
-                                    <td data-label="effective_end">
-                                        { dataFormatter.dateTimeFormatter(item.effective_end) }
-                                    </td>
-                                    
-                                    
-                                    
-                                    <td data-label="is_primary">
-                                        { dataFormatter.booleanFormatter(item.is_primary) }
-                                    </td>
-                                    
-                                    
-                                </tr>
-                              ))}
-                            </tbody>
-                        </table>
-                        </div>
-                        {!accounts?.account_price_lists_account?.length && <div className={'text-center py-4'}>No data</div>}
-                    </CardBox>
-                </>
-                
-                
-                <>
-                    <p className={'block font-bold mb-2'}>Carts Account</p>
-                    <CardBox
-                      className='mb-6 border border-gray-300 rounded overflow-hidden'
-                      hasTable
-                    >
-                        <div className='overflow-x-auto'>
-                            <table>
-                            <thead>
-                            <tr>
-                                
-                                
-                                
-                                
-                                
-                                
-                                
-                                
-                                <th>Cartstatus</th>
-                                
-                                
-                                
-                                <th>POnumber</th>
-                                
-                                
-                                
-                                <th>Requesteddeliverydate</th>
-                                
-                                
-                                
-                                <th>Buyernotes</th>
-                                
-                                
-                            </tr>
-                            </thead>
-                            <tbody>
-                            {accounts.carts_account && Array.isArray(accounts.carts_account) &&
-                              accounts.carts_account.map((item: any) => (
-                                <tr key={item.id} onClick={() => router.push(`/carts/carts-view/?id=${item.id}`)}>
-                                    
-                                    
-                                    
-                                    
-                                    
-                                    
-                                    
-                                    
-                                    <td data-label="cart_status">
-                                        { item.cart_status }
-                                    </td>
-                                    
-                                    
-                                    
-                                    <td data-label="po_number">
-                                        { item.po_number }
-                                    </td>
-                                    
-                                    
-                                    
-                                    <td data-label="requested_delivery_date">
-                                        { dataFormatter.dateTimeFormatter(item.requested_delivery_date) }
-                                    </td>
-                                    
-                                    
-                                    
-                                    <td data-label="buyer_notes">
-                                        { item.buyer_notes }
-                                    </td>
-                                    
-                                    
-                                </tr>
-                              ))}
-                            </tbody>
-                        </table>
-                        </div>
-                        {!accounts?.carts_account?.length && <div className={'text-center py-4'}>No data</div>}
-                    </CardBox>
-                </>
-                
-                
-                
-                <>
-                    <p className={'block font-bold mb-2'}>Orders Account</p>
-                    <CardBox
-                      className='mb-6 border border-gray-300 rounded overflow-hidden'
-                      hasTable
-                    >
-                        <div className='overflow-x-auto'>
-                            <table>
-                            <thead>
-                            <tr>
-                                
-                                
-                                <th>Ordernumber</th>
-                                
-                                
-                                
-                                
-                                
-                                
-                                
-                                
-                                
-                                <th>POnumber</th>
-                                
-                                
-                                
-                                <th>Orderedat</th>
-                                
-                                
-                                
-                                <th>Requesteddeliverydate</th>
-                                
-                                
-                                
-                                <th>Promiseddeliverydate</th>
-                                
-                                
-                                
-                                <th>Orderstatus</th>
-                                
-                                
-                                
-                                <th>Paymentterms</th>
-                                
-                                
-                                
-                                <th>Subtotal</th>
-                                
-                                
-                                
-                                <th>Taxtotal</th>
-                                
-                                
-                                
-                                <th>Shippingtotal</th>
-                                
-                                
-                                
-                                <th>Ordertotal</th>
-                                
-                                
-                                
-                                <th>Buyernotes</th>
-                                
-                                
-                                
-                                <th>Internalnotes</th>
-                                
-                                
-                            </tr>
-                            </thead>
-                            <tbody>
-                            {accounts.orders_account && Array.isArray(accounts.orders_account) &&
-                              accounts.orders_account.map((item: any) => (
-                                <tr key={item.id} onClick={() => router.push(`/orders/orders-view/?id=${item.id}`)}>
-                                    
-                                    
-                                    <td data-label="order_number">
-                                        { item.order_number }
-                                    </td>
-                                    
-                                    
-                                    
-                                    
-                                    
-                                    
-                                    
-                                    
-                                    
-                                    <td data-label="po_number">
-                                        { item.po_number }
-                                    </td>
-                                    
-                                    
-                                    
-                                    <td data-label="ordered_at">
-                                        { dataFormatter.dateTimeFormatter(item.ordered_at) }
-                                    </td>
-                                    
-                                    
-                                    
-                                    <td data-label="requested_delivery_date">
-                                        { dataFormatter.dateTimeFormatter(item.requested_delivery_date) }
-                                    </td>
-                                    
-                                    
-                                    
-                                    <td data-label="promised_delivery_date">
-                                        { dataFormatter.dateTimeFormatter(item.promised_delivery_date) }
-                                    </td>
-                                    
-                                    
-                                    
-                                    <td data-label="order_status">
-                                        { item.order_status }
-                                    </td>
-                                    
-                                    
-                                    
-                                    <td data-label="payment_terms">
-                                        { item.payment_terms }
-                                    </td>
-                                    
-                                    
-                                    
-                                    <td data-label="subtotal">
-                                        { item.subtotal }
-                                    </td>
-                                    
-                                    
-                                    
-                                    <td data-label="tax_total">
-                                        { item.tax_total }
-                                    </td>
-                                    
-                                    
-                                    
-                                    <td data-label="shipping_total">
-                                        { item.shipping_total }
-                                    </td>
-                                    
-                                    
-                                    
-                                    <td data-label="order_total">
-                                        { item.order_total }
-                                    </td>
-                                    
-                                    
-                                    
-                                    <td data-label="buyer_notes">
-                                        { item.buyer_notes }
-                                    </td>
-                                    
-                                    
-                                    
-                                    <td data-label="internal_notes">
-                                        { item.internal_notes }
-                                    </td>
-                                    
-                                    
-                                </tr>
-                              ))}
-                            </tbody>
-                        </table>
-                        </div>
-                        {!accounts?.orders_account?.length && <div className={'text-center py-4'}>No data</div>}
-                    </CardBox>
-                </>
-                
-                
-                
-                
-                <>
-                    <p className={'block font-bold mb-2'}>Quotes Account</p>
-                    <CardBox
-                      className='mb-6 border border-gray-300 rounded overflow-hidden'
-                      hasTable
-                    >
-                        <div className='overflow-x-auto'>
-                            <table>
-                            <thead>
-                            <tr>
-                                
-                                
-                                <th>Quotenumber</th>
-                                
-                                
-                                
-                                
-                                
-                                
-                                
-                                
-                                
-                                
-                                
-                                <th>Requestedat</th>
-                                
-                                
-                                
-                                <th>Expiresat</th>
-                                
-                                
-                                
-                                <th>Quotestatus</th>
-                                
-                                
-                                
-                                <th>Quotetotal</th>
-                                
-                                
-                                
-                                <th>Notes</th>
-                                
-                                
-                                
-                                
-                            </tr>
-                            </thead>
-                            <tbody>
-                            {accounts.quotes_account && Array.isArray(accounts.quotes_account) &&
-                              accounts.quotes_account.map((item: any) => (
-                                <tr key={item.id} onClick={() => router.push(`/quotes/quotes-view/?id=${item.id}`)}>
-                                    
-                                    
-                                    <td data-label="quote_number">
-                                        { item.quote_number }
-                                    </td>
-                                    
-                                    
-                                    
-                                    
-                                    
-                                    
-                                    
-                                    
-                                    
-                                    
-                                    
-                                    <td data-label="requested_at">
-                                        { dataFormatter.dateTimeFormatter(item.requested_at) }
-                                    </td>
-                                    
-                                    
-                                    
-                                    <td data-label="expires_at">
-                                        { dataFormatter.dateTimeFormatter(item.expires_at) }
-                                    </td>
-                                    
-                                    
-                                    
-                                    <td data-label="quote_status">
-                                        { item.quote_status }
-                                    </td>
-                                    
-                                    
-                                    
-                                    <td data-label="quote_total">
-                                        { item.quote_total }
-                                    </td>
-                                    
-                                    
-                                    
-                                    <td data-label="notes">
-                                        { item.notes }
-                                    </td>
-                                    
-                                    
-                                    
-                                    
-                                </tr>
-                              ))}
-                            </tbody>
-                        </table>
-                        </div>
-                        {!accounts?.quotes_account?.length && <div className={'text-center py-4'}>No data</div>}
-                    </CardBox>
-                </>
-                
-                
-                
-                <>
-                    <p className={'block font-bold mb-2'}>Sample_requests Account</p>
-                    <CardBox
-                      className='mb-6 border border-gray-300 rounded overflow-hidden'
-                      hasTable
-                    >
-                        <div className='overflow-x-auto'>
-                            <table>
-                            <thead>
-                            <tr>
-                                
-                                
-                                <th>Samplerequestnumber</th>
-                                
-                                
-                                
-                                
-                                
-                                
-                                
-                                
-                                
-                                
-                                
-                                <th>Samplequantity</th>
-                                
-                                
-                                
-                                <th>Requestedat</th>
-                                
-                                
-                                
-                                <th>Neededby</th>
-                                
-                                
-                                
-                                <th>Samplestatus</th>
-                                
-                                
-                                
-                                <th>Notes</th>
-                                
-                                
-                            </tr>
-                            </thead>
-                            <tbody>
-                            {accounts.sample_requests_account && Array.isArray(accounts.sample_requests_account) &&
-                              accounts.sample_requests_account.map((item: any) => (
-                                <tr key={item.id} onClick={() => router.push(`/sample_requests/sample_requests-view/?id=${item.id}`)}>
-                                    
-                                    
-                                    <td data-label="sample_request_number">
-                                        { item.sample_request_number }
-                                    </td>
-                                    
-                                    
-                                    
-                                    
-                                    
-                                    
-                                    
-                                    
-                                    
-                                    
-                                    
-                                    <td data-label="sample_quantity">
-                                        { item.sample_quantity }
-                                    </td>
-                                    
-                                    
-                                    
-                                    <td data-label="requested_at">
-                                        { dataFormatter.dateTimeFormatter(item.requested_at) }
-                                    </td>
-                                    
-                                    
-                                    
-                                    <td data-label="needed_by">
-                                        { dataFormatter.dateTimeFormatter(item.needed_by) }
-                                    </td>
-                                    
-                                    
-                                    
-                                    <td data-label="sample_status">
-                                        { item.sample_status }
-                                    </td>
-                                    
-                                    
-                                    
-                                    <td data-label="notes">
-                                        { item.notes }
-                                    </td>
-                                    
-                                    
-                                </tr>
-                              ))}
-                            </tbody>
-                        </table>
-                        </div>
-                        {!accounts?.sample_requests_account?.length && <div className={'text-center py-4'}>No data</div>}
-                    </CardBox>
-                </>
-                
-                
-                <>
-                    <p className={'block font-bold mb-2'}>Saved_lists Account</p>
-                    <CardBox
-                      className='mb-6 border border-gray-300 rounded overflow-hidden'
-                      hasTable
-                    >
-                        <div className='overflow-x-auto'>
-                            <table>
-                            <thead>
-                            <tr>
-                                
-                                
-                                
-                                
-                                
-                                
-                                <th>Listname</th>
-                                
-                                
-                                
-                                <th>Listtype</th>
-                                
-                                
-                                
-                                <th>Notes</th>
-                                
-                                
-                            </tr>
-                            </thead>
-                            <tbody>
-                            {accounts.saved_lists_account && Array.isArray(accounts.saved_lists_account) &&
-                              accounts.saved_lists_account.map((item: any) => (
-                                <tr key={item.id} onClick={() => router.push(`/saved_lists/saved_lists-view/?id=${item.id}`)}>
-                                    
-                                    
-                                    
-                                    
-                                    
-                                    
-                                    <td data-label="list_name">
-                                        { item.list_name }
-                                    </td>
-                                    
-                                    
-                                    
-                                    <td data-label="list_type">
-                                        { item.list_type }
-                                    </td>
-                                    
-                                    
-                                    
-                                    <td data-label="notes">
-                                        { item.notes }
-                                    </td>
-                                    
-                                    
-                                </tr>
-                              ))}
-                            </tbody>
-                        </table>
-                        </div>
-                        {!accounts?.saved_lists_account?.length && <div className={'text-center py-4'}>No data</div>}
-                    </CardBox>
-                </>
-                
-                
-                
-
-                <BaseDivider />
+              </SectionPanel>
 
+              <div>
                 <BaseButton
                     color='info'
-                    label='Back'
+                    label='Back to accounts'
                     onClick={() => router.push('/accounts/accounts-list')}
                 />
-              </CardBox>
+              </div>
+            </div>
           </SectionMain>
       </>
     );
 };
 
+const ActivityColumn = ({ title, items, emptyLabel, route, primary, secondary, dateField, amountField, router }) => (
+  <div className='rounded-xl border border-slate-200 bg-slate-50 p-4 dark:border-dark-700 dark:bg-dark-800'>
+    <div className='mb-3 text-sm font-semibold text-slate-950 dark:text-white'>{title}</div>
+    {items.length > 0 ? (
+      <div className='space-y-3'>
+        {items.slice(0, 4).map((item: any) => (
+          <button
+            key={item.id}
+            type='button'
+            onClick={() => router.push(`/${route}/${route}-view/?id=${item.id}`)}
+            className='w-full rounded-lg border border-slate-200 bg-white p-3 text-left transition hover:border-emerald-200 hover:bg-emerald-50 dark:border-dark-700 dark:bg-dark-900 dark:hover:border-emerald-800 dark:hover:bg-emerald-950'
+          >
+            <div className='font-semibold text-slate-950 dark:text-white'>{item[primary] || 'No number'}</div>
+            <div className='mt-2 flex flex-wrap items-center gap-2'>
+              <StatusBadge value={item[secondary]} />
+              {amountField && <span className='text-sm font-semibold text-slate-700 dark:text-slate-200'>{formatMoney(item[amountField])}</span>}
+            </div>
+            <div className='mt-2 text-xs text-slate-500 dark:text-slate-400'>{formatDate(item[dateField])}</div>
+          </button>
+        ))}
+      </div>
+    ) : (
+      <EmptyState label={emptyLabel} />
+    )}
+  </div>
+);
+
 AccountsView.getLayout = function getLayout(page: ReactElement) {
     return (
       <LayoutAuthenticated
@@ -1395,4 +416,4 @@ AccountsView.getLayout = function getLayout(page: ReactElement) {
     )
 }
 
-export default AccountsView;
\ No newline at end of file
+export default AccountsView;
diff --git a/frontend/src/pages/buyer-login.tsx b/frontend/src/pages/buyer-login.tsx
index 3f2a6f3..a16f3fe 100644
--- a/frontend/src/pages/buyer-login.tsx
+++ b/frontend/src/pages/buyer-login.tsx
@@ -1,279 +1,32 @@
-import type { ReactElement } from "react";
-import Head from "next/head";
-import { useRouter } from "next/router";
-import React, { useState } from "react";
-import axios from "axios";
-import jwt from "jsonwebtoken";
+import type { ReactElement } from 'react';
+import { useEffect } from 'react';
+import { useRouter } from 'next/router';
 
-import LayoutGuest from "../layouts/Guest";
-import { getPageTitle } from "../config";
+import LayoutGuest from '../layouts/Guest';
 
-const heroImage =
-  "https://images.pexels.com/photos/1126728/pexels-photo-1126728.jpeg?auto=compress&cs=tinysrgb&w=1800";
-
-const sampleImage =
-  "https://images.pexels.com/photos/4198018/pexels-photo-4198018.jpeg?auto=compress&cs=tinysrgb&w=900";
-
-const buyerCredentials = [
-  {
-    label: "Buyer admin",
-    role: "Customer Buyer Admin",
-    name: "Maria Alvarez",
-    email: "maria.alvarez@harbortable.com",
-    password: "a04a876c6d59",
-    note: "Purchasing lead with order, sample, quote, and location workflow access.",
-  },
-  {
-    label: "Buyer user",
-    role: "Customer Buyer",
-    name: "Owen Price",
-    email: "owen.price@harbortable.com",
-    password: "a04a876c6d59",
-    note: "Restaurant buyer focused on catalog, reorder history, and PO checkout.",
-  },
-];
-
-export default function BuyerLoginPage() {
+export default function BuyerLoginRedirect() {
   const router = useRouter();
-  const [email, setEmail] = useState(buyerCredentials[0].email);
-  const [password, setPassword] = useState(buyerCredentials[0].password);
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [errorMessage, setErrorMessage] = useState("");
 
-  const getReturnTo = () => {
-    const value = Array.isArray(router.query.returnTo)
+  useEffect(() => {
+    if (!router.isReady) {
+      return;
+    }
+
+    const returnTo = Array.isArray(router.query.returnTo)
       ? router.query.returnTo[0]
-      : router.query.returnTo;
+      : router.query.returnTo || '/buyer-portal/';
 
-    if (value && value.startsWith("/")) {
-      return value;
-    }
+    router.replace({
+      pathname: '/login',
+      query: {
+        returnTo,
+      },
+    });
+  }, [router]);
 
-    return "/buyer-portal/";
-  };
-
-  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    setIsSubmitting(true);
-    setErrorMessage("");
-
-    try {
-      const { data: token } = await axios.post("/auth/signin/local", {
-        email,
-        password,
-      });
-      const user = jwt.decode(token);
-
-      localStorage.setItem("token", token);
-      localStorage.setItem("user", JSON.stringify(user));
-      axios.defaults.headers.common.Authorization = `Bearer ${token}`;
-
-      router.push(getReturnTo());
-    } catch (error: any) {
-      console.error("Buyer login failed", error);
-      setErrorMessage(
-        error?.response?.data ||
-          "Unable to sign in with those buyer credentials."
-      );
-    } finally {
-      setIsSubmitting(false);
-    }
-  };
-
-  const useCredentials = (credentials: typeof buyerCredentials[number]) => {
-    setEmail(credentials.email);
-    setPassword(credentials.password);
-    setErrorMessage("");
-  };
-
-  return (
-    <>
-      <Head>
-        <title>{getPageTitle("Buyer sign in")}</title>
-        <meta
-          name="description"
-          content="Buyer sign in for the Northstar Foodservice B2B supplier and distributor portal."
-        />
-      </Head>
-
-      <main className="min-h-screen bg-stone-50 text-slate-950">
-        <section className="grid min-h-screen lg:grid-cols-[minmax(0,1.1fr)_520px]">
-          <div className="relative hidden overflow-hidden lg:block">
-            <img
-              src={heroImage}
-              alt="Restaurant table prepared for foodservice buyers"
-              className="absolute inset-0 h-full w-full object-cover"
-            />
-            <div className="absolute inset-0 bg-gradient-to-r from-slate-950/80 via-slate-950/35 to-transparent" />
-            <div className="relative flex h-full flex-col justify-between p-12 text-white">
-              <div>
-                <p className="text-sm font-semibold uppercase tracking-[0.24em] text-emerald-200">
-                  Northstar Foodservice
-                </p>
-                <h1 className="mt-5 max-w-2xl text-5xl font-semibold leading-tight">
-                  Contract ordering for restaurant buyers
-                </h1>
-                <p className="mt-5 max-w-xl text-base leading-8 text-stone-100">
-                  Browse account pricing, request samples, build purchase
-                  orders, and reorder from history without chasing PDF sheets.
-                </p>
-              </div>
-
-              <div className="grid max-w-2xl gap-3 sm:grid-cols-3">
-                <div className="border-l-4 border-emerald-300 bg-slate-950/45 p-4 backdrop-blur">
-                  <p className="text-xs uppercase tracking-[0.18em] text-stone-300">
-                    Price file
-                  </p>
-                  <p className="mt-2 font-semibold">Northstar Contract</p>
-                </div>
-                <div className="border-l-4 border-amber-300 bg-slate-950/45 p-4 backdrop-blur">
-                  <p className="text-xs uppercase tracking-[0.18em] text-stone-300">
-                    Cutoff
-                  </p>
-                  <p className="mt-2 font-semibold">Today 3 PM</p>
-                </div>
-                <div className="border-l-4 border-sky-300 bg-slate-950/45 p-4 backdrop-blur">
-                  <p className="text-xs uppercase tracking-[0.18em] text-stone-300">
-                    Workflow
-                  </p>
-                  <p className="mt-2 font-semibold">Catalog to PO</p>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <div className="flex items-center justify-center px-6 py-10">
-            <div className="w-full max-w-md">
-              <a
-                href="/"
-                className="inline-flex text-sm font-semibold text-emerald-700"
-              >
-                Back to portal overview
-              </a>
-
-              <div className="mt-8 overflow-hidden border border-stone-200 bg-white shadow-sm">
-                <img
-                  src={sampleImage}
-                  alt="Sample-ready specialty ingredient"
-                  className="h-44 w-full object-cover"
-                />
-                <div className="p-6">
-                  <p className="text-xs font-semibold uppercase tracking-[0.22em] text-emerald-700">
-                    Buyer sign in
-                  </p>
-                  <h2 className="mt-3 text-3xl font-semibold">
-                    Open your order guide
-                  </h2>
-                  <p className="mt-3 text-sm leading-7 text-slate-600">
-                    Sign in to see contract pricing, saved order behavior,
-                    sample requests, and purchase-order checkout.
-                  </p>
-
-                  <div className="mt-5 grid gap-3">
-                    {buyerCredentials.map((credentials) => {
-                      const isActive =
-                        email === credentials.email &&
-                        password === credentials.password;
-
-                      return (
-                        <button
-                          key={credentials.email}
-                          type="button"
-                          onClick={() => useCredentials(credentials)}
-                          className={`rounded-2xl border p-4 text-left transition ${
-                            isActive
-                              ? "border-emerald-300 bg-emerald-50"
-                              : "border-stone-200 bg-stone-50 hover:border-emerald-200 hover:bg-emerald-50"
-                          }`}
-                        >
-                          <div className="flex items-start justify-between gap-3">
-                            <div>
-                              <p className="text-sm font-bold text-slate-950">
-                                {credentials.label}
-                              </p>
-                              <p className="mt-1 text-xs font-semibold uppercase tracking-[0.16em] text-emerald-700">
-                                {credentials.role}
-                              </p>
-                            </div>
-                            <span className="rounded-full bg-white px-3 py-1 text-xs font-semibold text-slate-600 shadow-sm">
-                              Use creds
-                            </span>
-                          </div>
-                          <p className="mt-3 text-sm font-semibold text-slate-900">
-                            {credentials.name}
-                          </p>
-                          <p className="mt-1 break-all font-mono text-xs text-slate-600">
-                            {credentials.email}
-                          </p>
-                          <p className="mt-1 font-mono text-xs text-slate-500">
-                            {credentials.password}
-                          </p>
-                          <p className="mt-3 text-xs leading-5 text-slate-500">
-                            {credentials.note}
-                          </p>
-                        </button>
-                      );
-                    })}
-                  </div>
-
-                  {errorMessage && (
-                    <div className="mt-5 rounded-2xl border border-rose-200 bg-rose-50 p-4 text-sm text-rose-800">
-                      {errorMessage}
-                    </div>
-                  )}
-
-                  <form className="mt-6 space-y-4" onSubmit={handleSubmit}>
-                    <label className="block">
-                      <span className="text-sm font-semibold text-slate-900">
-                        Email
-                      </span>
-                      <input
-                        value={email}
-                        onChange={(event) => setEmail(event.target.value)}
-                        className="mt-2 h-12 w-full rounded-xl border border-stone-300 bg-white px-4 text-slate-950 outline-none focus:border-emerald-500 focus:ring-2 focus:ring-emerald-100"
-                        type="email"
-                        autoComplete="email"
-                      />
-                    </label>
-                    <label className="block">
-                      <span className="text-sm font-semibold text-slate-900">
-                        Password
-                      </span>
-                      <input
-                        value={password}
-                        onChange={(event) => setPassword(event.target.value)}
-                        className="mt-2 h-12 w-full rounded-xl border border-stone-300 bg-white px-4 text-slate-950 outline-none focus:border-emerald-500 focus:ring-2 focus:ring-emerald-100"
-                        type="password"
-                        autoComplete="current-password"
-                      />
-                    </label>
-
-                    <button
-                      type="submit"
-                      disabled={isSubmitting}
-                      className="h-12 w-full rounded-xl bg-emerald-500 px-5 text-sm font-bold text-slate-950 shadow-sm transition hover:bg-emerald-400 disabled:cursor-not-allowed disabled:opacity-70"
-                    >
-                      {isSubmitting
-                        ? "Signing in..."
-                        : "Sign in to buyer portal"}
-                    </button>
-                  </form>
-
-                  <div className="mt-5 rounded-2xl bg-stone-50 p-4 text-sm leading-7 text-slate-600">
-                    Demo workspace is prefilled for the generated project. A
-                    production supplier would connect this page to buyer
-                    accounts, SSO, or invited customer contacts.
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </section>
-      </main>
-    </>
-  );
+  return null;
 }
 
-BuyerLoginPage.getLayout = function getLayout(page: ReactElement) {
+BuyerLoginRedirect.getLayout = function getLayout(page: ReactElement) {
   return <LayoutGuest>{page}</LayoutGuest>;
 };
diff --git a/frontend/src/pages/buyer-portal.tsx b/frontend/src/pages/buyer-portal.tsx
index 8cebfc8..c0b5321 100644
--- a/frontend/src/pages/buyer-portal.tsx
+++ b/frontend/src/pages/buyer-portal.tsx
@@ -304,6 +304,15 @@ const statusClasses: Record<string, string> = {
   backordered: 'bg-amber-50 text-amber-700 border-amber-200',
 };
 
+const fallbackProductImages = [
+  'https://images.unsplash.com/photo-1452195100486-9cc805987862?auto=format&fit=crop&w=900&q=80',
+  'https://images.unsplash.com/photo-1501443762994-82bd5dace89a?auto=format&fit=crop&w=900&q=80',
+  'https://images.unsplash.com/photo-1544025162-d76694265947?auto=format&fit=crop&w=900&q=80',
+  'https://images.unsplash.com/photo-1486297678162-eb2a19b0a32d?auto=format&fit=crop&w=900&q=80',
+  'https://images.unsplash.com/photo-1512621776951-a57141f2eefd?auto=format&fit=crop&w=900&q=80',
+  'https://images.unsplash.com/photo-1542838132-92c53300491e?auto=format&fit=crop&w=900&q=80',
+];
+
 const StatusPill = ({ label }: { label?: string | null }) => {
   const normalized = label || 'unknown';
   const colorClass =
@@ -1225,6 +1234,29 @@ const BuyerPortalPage = () => {
     [workspace],
   );
 
+  const readinessSteps = [
+    {
+      label: 'Account',
+      value: currentAccount?.account_name || 'Choose account',
+      ready: Boolean(selectedAccountId),
+    },
+    {
+      label: 'Ship-to',
+      value: currentLocation?.location_name || 'Choose location',
+      ready: Boolean(selectedLocationId),
+    },
+    {
+      label: 'PO',
+      value: poNumber || 'Required',
+      ready: Boolean(poNumber.trim()),
+    },
+    {
+      label: 'Draft',
+      value: `${cartItems.length} line(s)`,
+      ready: cartItems.length > 0,
+    },
+  ];
+
   if (!currentUser) {
     return (
       <>
@@ -1341,6 +1373,39 @@ const BuyerPortalPage = () => {
             </FormField>
           </div>
 
+          <div className='mt-5 grid gap-3 lg:grid-cols-4'>
+            {readinessSteps.map((step, index) => (
+              <div
+                key={step.label}
+                className={`rounded-2xl border p-4 ${
+                  step.ready
+                    ? 'border-emerald-200 bg-emerald-50'
+                    : 'border-amber-200 bg-amber-50'
+                }`}
+              >
+                <div className='flex items-center gap-3'>
+                  <span
+                    className={`flex h-8 w-8 items-center justify-center rounded-full text-sm font-bold ${
+                      step.ready
+                        ? 'bg-emerald-600 text-white'
+                        : 'bg-amber-500 text-white'
+                    }`}
+                  >
+                    {index + 1}
+                  </span>
+                  <div className='min-w-0'>
+                    <p className='text-xs font-semibold uppercase tracking-[0.16em] text-slate-500'>
+                      {step.label}
+                    </p>
+                    <p className='mt-1 truncate text-sm font-semibold text-slate-950'>
+                      {step.value}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+
           <div className='mt-5 grid gap-3 text-sm sm:grid-cols-2 lg:grid-cols-4'>
             <div className='rounded-2xl bg-blue-50 p-4'>
               <p className='text-xs uppercase tracking-[0.16em] text-blue-700'>
@@ -1397,7 +1462,10 @@ const BuyerPortalPage = () => {
         )}
 
         {canReadBuyerTeamQueue && (
-          <div className='mb-6 grid gap-4 xl:grid-cols-4'>
+          <div
+            id='team-queue'
+            className='mb-6 grid gap-4 scroll-mt-24 xl:grid-cols-4'
+          >
             <CardBox className='border border-slate-200 bg-white shadow-sm'>
               <div className='flex items-start justify-between gap-3'>
                 <div>
@@ -1486,7 +1554,10 @@ const BuyerPortalPage = () => {
               </div>
             </CardBox>
 
-            <CardBox className='border border-slate-200 bg-white shadow-sm'>
+            <CardBox
+              id='buyer-quotes'
+              className='border border-slate-200 bg-white shadow-sm'
+            >
               <div className='flex items-start justify-between gap-3'>
                 <div>
                   <p className='text-xs font-semibold uppercase tracking-[0.18em] text-violet-600'>
@@ -1530,7 +1601,10 @@ const BuyerPortalPage = () => {
               </div>
             </CardBox>
 
-            <CardBox className='border border-slate-200 bg-white shadow-sm'>
+            <CardBox
+              id='saved-guides'
+              className='border border-slate-200 bg-white shadow-sm'
+            >
               <div className='flex items-start justify-between gap-3'>
                 <div>
                   <p className='text-xs font-semibold uppercase tracking-[0.18em] text-emerald-600'>
@@ -1576,7 +1650,7 @@ const BuyerPortalPage = () => {
         <div className='mb-6 grid gap-6 xl:grid-cols-[minmax(0,1fr)_420px]'>
           <CardBox
             id='catalog'
-            className='border border-slate-200 bg-white shadow-sm'
+            className='scroll-mt-24 border border-slate-200 bg-white shadow-sm'
           >
             <div className='mb-5 flex flex-col gap-4 border-b border-slate-100 pb-5 lg:flex-row lg:items-center lg:justify-between'>
               <div>
@@ -1593,9 +1667,9 @@ const BuyerPortalPage = () => {
               </div>
               <div className='flex flex-wrap gap-2'>
                 {[
-                  ['order_guide', 'Order Guide'],
-                  ['full_catalog', 'Full Catalog'],
-                  ['previously_purchased', 'Previously Purchased'],
+                  ['order_guide', 'Order guide'],
+                  ['full_catalog', 'Full catalog'],
+                  ['previously_purchased', 'Previously purchased'],
                 ].map(([mode, label]) => (
                   <button
                     key={mode}
@@ -1680,17 +1754,25 @@ const BuyerPortalPage = () => {
                 </div>
 
                 <div className='space-y-3'>
-                  {filteredCatalog.map((product) => {
+                  {filteredCatalog.map((product, index) => {
                     const minQty =
                       product.contract_min_case_qty || product.moq_cases || 1;
                     const qtyValue =
                       catalogQuantities[product.id] || String(minQty);
                     const currentQty = Number.parseInt(qtyValue, 10) || minQty;
+                    const fallbackImage =
+                      fallbackProductImages[index % fallbackProductImages.length];
                     return (
                       <div
                         key={product.id}
                         className='rounded-2xl border border-slate-200 bg-white p-4 shadow-sm transition hover:border-blue-200 hover:shadow-md'
                       >
+                        <div
+                          role='img'
+                          aria-label={product.product_name}
+                          className='mb-4 h-40 rounded-2xl bg-slate-100 bg-cover bg-center'
+                          style={{ backgroundImage: `url(${fallbackImage})` }}
+                        />
                         <div className='grid gap-4'>
                           <div className='min-w-0'>
                             <div className='flex flex-wrap items-center gap-2'>
@@ -1991,7 +2073,7 @@ const BuyerPortalPage = () => {
           <div className='space-y-6 xl:sticky xl:top-6 xl:self-start'>
             <CardBox
               id='purchase-order'
-              className='border border-slate-200 bg-white shadow-sm'
+              className='scroll-mt-24 border border-slate-200 bg-white shadow-sm'
             >
               <div className='mb-4 flex items-start justify-between gap-4'>
                 <div>
@@ -2200,7 +2282,7 @@ const BuyerPortalPage = () => {
 
             <CardBox
               id='samples'
-              className='border border-slate-200 bg-white shadow-sm'
+              className='scroll-mt-24 border border-slate-200 bg-white shadow-sm'
             >
               <div className='mb-4 flex items-start justify-between gap-4'>
                 <div>
@@ -2319,7 +2401,7 @@ const BuyerPortalPage = () => {
         <div className='grid gap-6 lg:grid-cols-[1.5fr_1fr]'>
           <CardBox
             id='orders'
-            className='border border-slate-200 bg-white shadow-sm'
+            className='scroll-mt-24 border border-slate-200 bg-white shadow-sm'
           >
             <div className='mb-5 flex items-start justify-between gap-4'>
               <div>
@@ -2330,9 +2412,8 @@ const BuyerPortalPage = () => {
                   Load a previous order into a new draft
                 </h3>
                 <p className='mt-2 text-sm text-slate-500'>
-                  This is the thinnest end-to-end buyer slice: select an
-                  account, reuse past purchasing behavior, submit a fresh PO,
-                  and jump into the order detail screen.
+                  Review delivered and active orders, then reload familiar
+                  purchasing patterns into a fresh draft PO.
                 </p>
               </div>
             </div>
@@ -2430,10 +2511,10 @@ const BuyerPortalPage = () => {
           </CardBox>
 
           <div className='space-y-6'>
-            <CardBox
-              id='quotes'
-              className='border border-slate-200 bg-white shadow-sm'
-            >
+          <CardBox
+            id='quotes'
+            className='scroll-mt-24 border border-slate-200 bg-white shadow-sm'
+          >
               <div className='flex items-start justify-between gap-4'>
                 <div>
                   <p className='text-sm font-semibold uppercase tracking-[0.22em] text-blue-600'>
diff --git a/frontend/src/pages/dashboard.tsx b/frontend/src/pages/dashboard.tsx
index 0d55c75..0964064 100644
--- a/frontend/src/pages/dashboard.tsx
+++ b/frontend/src/pages/dashboard.tsx
@@ -11,10 +11,7 @@ import SectionTitleLineWithButton from '../components/SectionTitleLineWithButton
 import BaseIcon from '../components/BaseIcon';
 import { getPageTitle } from '../config';
 import { hasPermission } from '../helpers/userPermissions';
-import { fetchWidgets } from '../stores/roles/rolesSlice';
-import { WidgetCreator } from '../components/WidgetCreator/WidgetCreator';
-import { SmartWidget } from '../components/SmartWidget/SmartWidget';
-import { useAppDispatch, useAppSelector } from '../stores/hooks';
+import { useAppSelector } from '../stores/hooks';
 
 type DashboardCount = number | string | null;
 
@@ -28,6 +25,98 @@ type DashboardEntity = {
   group: 'commercial' | 'catalog' | 'fulfillment' | 'system';
 };
 
+type UserSummary = {
+  firstName?: string;
+  lastName?: string;
+  email?: string;
+};
+
+type PriceListSummary = {
+  price_list_name?: string;
+};
+
+type AccountSummary = {
+  id: string;
+  account_name: string;
+  account_type?: string;
+  account_number?: string;
+  credit_status?: string;
+  credit_limit?: string;
+  notes?: string;
+  default_price_list?: PriceListSummary;
+  assigned_sales_rep?: UserSummary;
+};
+
+type LocationSummary = {
+  location_name?: string;
+  city?: string;
+  state?: string;
+};
+
+type OrderSummary = {
+  id: string;
+  order_number: string;
+  po_number?: string;
+  order_status?: string;
+  order_total?: string | number;
+  ordered_at?: string;
+  requested_delivery_date?: string;
+  promised_delivery_date?: string;
+  account?: AccountSummary;
+  location?: LocationSummary;
+  buyer?: UserSummary;
+};
+
+type SampleRequestSummary = {
+  id: string;
+  sample_request_number: string;
+  sample_status?: string;
+  needed_by?: string;
+  account?: AccountSummary;
+  product?: ProductSummary;
+  requested_by?: UserSummary;
+};
+
+type QuoteSummary = {
+  id: string;
+  quote_number: string;
+  quote_status?: string;
+  quote_total?: string | number;
+  expires_at?: string;
+  account?: AccountSummary;
+  owner?: UserSummary;
+};
+
+type ProductSummary = {
+  id: string;
+  sku?: string;
+  product_name: string;
+  brand?: string;
+  product_status?: string;
+  temperature_zone?: string;
+  moq_cases?: number;
+  is_sample_eligible?: boolean;
+  category?: {
+    category_name?: string;
+  };
+  spec_sheet?: unknown[];
+};
+
+type InventoryItemSummary = {
+  id: string;
+  warehouse_name?: string;
+  available_cases?: number;
+  allocated_cases?: number;
+  product?: ProductSummary;
+};
+
+const supplierDashboardPermissions = [
+  'READ_ACCOUNTS',
+  'READ_PRODUCTS',
+  'READ_ORDERS',
+  'READ_INVENTORY_ITEMS',
+];
+
 const dashboardEntities: DashboardEntity[] = [
   {
     key: 'accounts',
@@ -193,27 +282,36 @@ const dashboardEntities: DashboardEntity[] = [
   },
 ];
 
-const featuredKeys = ['orders', 'accounts', 'products', 'sample_requests'];
-
 const groupCopy = {
   commercial: {
-    title: 'Commercial operations',
-    subtitle: 'Customer accounts, contacts, pricing, and quote follow-up.',
+    title: 'Commercial control',
+    subtitle: 'Accounts, price files, contacts, and quote follow-up.',
   },
   catalog: {
-    title: 'Catalog and inventory',
-    subtitle: 'Foodservice SKUs, sample flow, stock, and buyer order guides.',
+    title: 'Catalog readiness',
+    subtitle: 'Foodservice SKUs, samples, stock, and order guides.',
   },
   fulfillment: {
-    title: 'Fulfillment',
-    subtitle: 'Purchase orders, order lines, carts, and delivery handoff.',
+    title: 'Fulfillment floor',
+    subtitle: 'Purchase orders, lines, carts, and delivery handoff.',
   },
   system: {
-    title: 'System access',
-    subtitle: 'Roles, permissions, users, and operating controls.',
+    title: 'Access control',
+    subtitle: 'Users, roles, permissions, and operational guardrails.',
   },
 };
 
+const currencyFormatter = new Intl.NumberFormat('en-US', {
+  style: 'currency',
+  currency: 'USD',
+  maximumFractionDigits: 0,
+});
+
+const dateFormatter = new Intl.DateTimeFormat('en-US', {
+  month: 'short',
+  day: 'numeric',
+});
+
 const formatCount = (value: DashboardCount | undefined) => {
   if (value === undefined) {
     return 'Loading';
@@ -226,17 +324,128 @@ const formatCount = (value: DashboardCount | undefined) => {
   return String(value);
 };
 
+const formatCurrency = (value?: string | number) => {
+  const numericValue = Number(value || 0);
+
+  if (!Number.isFinite(numericValue)) {
+    return '$0';
+  }
+
+  return currencyFormatter.format(numericValue);
+};
+
+const formatDate = (value?: string) => {
+  if (!value) {
+    return 'Not set';
+  }
+
+  return dateFormatter.format(new Date(value));
+};
+
+const formatUserName = (user?: UserSummary) => {
+  if (!user) {
+    return 'Unassigned';
+  }
+
+  const name = [user.firstName, user.lastName].filter(Boolean).join(' ');
+  return name || user.email || 'Unassigned';
+};
+
+const humanizeStatus = (status?: string) => {
+  if (!status) {
+    return 'Unassigned';
+  }
+
+  return status
+    .split('_')
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join(' ');
+};
+
+const getStatusClass = (status?: string) => {
+  if (['approved', 'accepted', 'delivered', 'active', 'good'].includes(status || '')) {
+    return 'border-emerald-200 bg-emerald-50 text-emerald-800';
+  }
+
+  if (['submitted', 'sent', 'in_review', 'shipped'].includes(status || '')) {
+    return 'border-blue-200 bg-blue-50 text-blue-800';
+  }
+
+  if (['requested', 'draft', 'pending'].includes(status || '')) {
+    return 'border-amber-200 bg-amber-50 text-amber-800';
+  }
+
+  if (['cancelled', 'declined', 'expired', 'exception', 'on_hold'].includes(status || '')) {
+    return 'border-rose-200 bg-rose-50 text-rose-800';
+  }
+
+  return 'border-slate-200 bg-slate-50 text-slate-700';
+};
+
+const isOpenOrder = (order: OrderSummary) =>
+  !['delivered', 'cancelled'].includes(order.order_status || '');
+
+const isActiveSample = (sample: SampleRequestSummary) =>
+  !['delivered', 'declined', 'cancelled'].includes(sample.sample_status || '');
+
+const isPendingQuote = (quote: QuoteSummary) =>
+  !['accepted', 'declined', 'expired'].includes(quote.quote_status || '');
+
+const isDueSoon = (dateValue?: string) => {
+  if (!dateValue) {
+    return false;
+  }
+
+  const dueDate = new Date(dateValue).getTime();
+
+  if (!Number.isFinite(dueDate)) {
+    return false;
+  }
+
+  const sevenDaysFromNow = Date.now() + 7 * 24 * 60 * 60 * 1000;
+  return dueDate <= sevenDaysFromNow;
+};
+
+const isDemoRecord = (id: string, prefix: string) => id.startsWith(prefix);
+
+const isGeneratedPlaceholder = (value?: string) =>
+  ['Ada Lovelace', 'Alan Turing', 'Grace Hopper', 'Marie Curie'].includes(
+    value || '',
+  );
+
+const StatusPill = ({ status }: { status?: string }) => (
+  <span
+    className={`inline-flex rounded-full border px-2.5 py-1 text-xs font-bold ${getStatusClass(
+      status,
+    )}`}
+  >
+    {humanizeStatus(status)}
+  </span>
+);
+
+const EmptyState = ({ text }: { text: string }) => (
+  <div className='rounded-xl border border-dashed border-slate-300 bg-slate-50 p-4 text-sm text-slate-500'>
+    {text}
+  </div>
+);
+
 const Dashboard = () => {
-  const dispatch = useAppDispatch();
   const [counts, setCounts] = React.useState<Record<string, DashboardCount>>(
     {},
   );
-  const [widgetsRole, setWidgetsRole] = React.useState({
-    role: { value: '', label: '' },
-  });
+  const [orders, setOrders] = React.useState<OrderSummary[]>([]);
+  const [sampleRequests, setSampleRequests] = React.useState<
+    SampleRequestSummary[]
+  >([]);
+  const [quotes, setQuotes] = React.useState<QuoteSummary[]>([]);
+  const [accounts, setAccounts] = React.useState<AccountSummary[]>([]);
+  const [products, setProducts] = React.useState<ProductSummary[]>([]);
+  const [inventoryItems, setInventoryItems] = React.useState<
+    InventoryItemSummary[]
+  >([]);
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [dashboardError, setDashboardError] = React.useState('');
   const { currentUser } = useAppSelector((state) => state.auth);
-  const { isFetchingQuery } = useAppSelector((state) => state.openAi);
-  const { rolesWidgets, loading } = useAppSelector((state) => state.roles);
 
   const visibleEntities = React.useMemo(() => {
     return dashboardEntities.filter((entity) =>
@@ -244,78 +453,303 @@ const Dashboard = () => {
     );
   }, [currentUser]);
 
-  const featuredEntities = visibleEntities.filter((entity) =>
-    featuredKeys.includes(entity.key),
+  const openOrders = React.useMemo(
+    () => orders.filter(isOpenOrder).slice(0, 5),
+    [orders],
   );
+  const dueSoonOrders = React.useMemo(
+    () =>
+      orders
+        .filter(isOpenOrder)
+        .filter((order) => isDueSoon(order.requested_delivery_date)),
+    [orders],
+  );
+  const activeSamples = React.useMemo(
+    () => sampleRequests.filter(isActiveSample).slice(0, 4),
+    [sampleRequests],
+  );
+  const pendingQuotes = React.useMemo(
+    () => quotes.filter(isPendingQuote).slice(0, 4),
+    [quotes],
+  );
+  const activeProducts = React.useMemo(
+    () =>
+      products.filter((product) => product.product_status !== 'discontinued'),
+    [products],
+  );
+  const sampleReadyProducts = React.useMemo(
+    () => activeProducts.filter((product) => product.is_sample_eligible),
+    [activeProducts],
+  );
+  const missingSpecProducts = React.useMemo(
+    () => activeProducts.filter((product) => !product.spec_sheet?.length),
+    [activeProducts],
+  );
+  const inventoryAlerts = React.useMemo(
+    () =>
+      inventoryItems
+        .filter((item) => Number(item.available_cases || 0) <= 3)
+        .slice(0, 4),
+    [inventoryItems],
+  );
+  const accountActivity = React.useMemo(() => {
+    const activity = new Map<string, { openOrders: number; total: number }>();
 
-  async function loadData() {
-    const requests = visibleEntities.map((entity) =>
-      axios.get(`/${entity.key.toLowerCase()}/count`),
-    );
-
-    const results = await Promise.allSettled(requests);
-    const nextCounts: Record<string, DashboardCount> = {};
-
-    results.forEach((result, index) => {
-      const entity = visibleEntities[index];
-
-      if (result.status === 'fulfilled') {
-        nextCounts[entity.key] = result.value.data.count;
-      } else {
-        console.error(
-          `Failed to load dashboard count for ${entity.key}`,
-          result.reason,
-        );
-        nextCounts[entity.key] = 'Error';
+    orders.forEach((order) => {
+      if (!order.account?.id) {
+        return;
       }
+
+      const current = activity.get(order.account.id) || {
+        openOrders: 0,
+        total: 0,
+      };
+      current.total += Number(order.order_total || 0);
+
+      if (isOpenOrder(order)) {
+        current.openOrders += 1;
+      }
+
+      activity.set(order.account.id, current);
     });
 
-    setCounts(nextCounts);
-  }
+    return activity;
+  }, [orders]);
 
-  async function getWidgets(roleId) {
-    await dispatch(fetchWidgets(roleId));
-  }
+  const loadDashboard = React.useCallback(async () => {
+    if (!currentUser) {
+      return;
+    }
+
+    setIsLoading(true);
+    setDashboardError('');
+
+    try {
+      const countResults = await Promise.allSettled(
+        visibleEntities.map((entity) =>
+          axios.get(`/${entity.key.toLowerCase()}/count`),
+        ),
+      );
+      const nextCounts: Record<string, DashboardCount> = {};
+      const failures: string[] = [];
+
+      countResults.forEach((result, index) => {
+        const entity = visibleEntities[index];
+
+        if (result.status === 'fulfilled') {
+          nextCounts[entity.key] = result.value.data.count;
+        } else {
+          console.error(
+            `Failed to load dashboard count for ${entity.key}`,
+            result.reason,
+          );
+          nextCounts[entity.key] = 'Error';
+          failures.push(entity.label);
+        }
+      });
+
+      const [
+        ordersResult,
+        samplesResult,
+        quotesResult,
+        accountsResult,
+        productsResult,
+        inventoryResult,
+      ] = await Promise.allSettled([
+        hasPermission(currentUser, 'READ_ORDERS')
+          ? axios.get('/orders', { params: { page: 0, limit: 12 } })
+          : Promise.resolve({ data: { rows: [] } }),
+        hasPermission(currentUser, 'READ_SAMPLE_REQUESTS')
+          ? axios.get('/sample_requests', { params: { page: 0, limit: 8 } })
+          : Promise.resolve({ data: { rows: [] } }),
+        hasPermission(currentUser, 'READ_QUOTES')
+          ? axios.get('/quotes', { params: { page: 0, limit: 8 } })
+          : Promise.resolve({ data: { rows: [] } }),
+        hasPermission(currentUser, 'READ_ACCOUNTS')
+          ? axios.get('/accounts', { params: { page: 0, limit: 8 } })
+          : Promise.resolve({ data: { rows: [] } }),
+        hasPermission(currentUser, 'READ_PRODUCTS')
+          ? axios.get('/products', { params: { page: 0, limit: 18 } })
+          : Promise.resolve({ data: { rows: [] } }),
+        hasPermission(currentUser, 'READ_INVENTORY_ITEMS')
+          ? axios.get('/inventory_items', { params: { page: 0, limit: 18 } })
+          : Promise.resolve({ data: { rows: [] } }),
+      ]);
+      let loadedOrders: OrderSummary[] = [];
+      let loadedSamples: SampleRequestSummary[] = [];
+      let loadedQuotes: QuoteSummary[] = [];
+      let loadedAccounts: AccountSummary[] = [];
+      let loadedProducts: ProductSummary[] = [];
+      let loadedInventory: InventoryItemSummary[] = [];
+
+      if (ordersResult.status === 'fulfilled') {
+        loadedOrders = (ordersResult.value.data.rows || []).filter(
+          (order: OrderSummary) => isDemoRecord(order.id, '79300000'),
+        );
+        setOrders(loadedOrders);
+      } else {
+        console.error('Failed to load dashboard orders', ordersResult.reason);
+        failures.push('Orders');
+      }
+
+      if (samplesResult.status === 'fulfilled') {
+        loadedSamples = (samplesResult.value.data.rows || []).filter(
+          (sample: SampleRequestSummary) => isDemoRecord(sample.id, '79200000'),
+        );
+        setSampleRequests(loadedSamples);
+      } else {
+        console.error(
+          'Failed to load dashboard sample requests',
+          samplesResult.reason,
+        );
+        failures.push('Sample requests');
+      }
+
+      if (quotesResult.status === 'fulfilled') {
+        loadedQuotes = (quotesResult.value.data.rows || []).filter(
+          (quote: QuoteSummary) => isDemoRecord(quote.id, '79000000'),
+        );
+        setQuotes(loadedQuotes);
+      } else {
+        console.error('Failed to load dashboard quotes', quotesResult.reason);
+        failures.push('Quotes');
+      }
+
+      if (accountsResult.status === 'fulfilled') {
+        loadedAccounts = (accountsResult.value.data.rows || []).filter(
+          (account: AccountSummary) => isDemoRecord(account.id, '71000000'),
+        );
+        setAccounts(loadedAccounts);
+      } else {
+        console.error('Failed to load dashboard accounts', accountsResult.reason);
+        failures.push('Accounts');
+      }
+
+      if (productsResult.status === 'fulfilled') {
+        loadedProducts = (productsResult.value.data.rows || []).filter(
+          (product: ProductSummary) => isDemoRecord(product.id, '75000000'),
+        );
+        setProducts(loadedProducts);
+      } else {
+        console.error('Failed to load dashboard products', productsResult.reason);
+        failures.push('Products');
+      }
+
+      if (inventoryResult.status === 'fulfilled') {
+        loadedInventory = (inventoryResult.value.data.rows || []).filter(
+          (item: InventoryItemSummary) =>
+            !isGeneratedPlaceholder(item.product?.product_name) &&
+            !isGeneratedPlaceholder(item.product?.sku) &&
+            !isGeneratedPlaceholder(item.warehouse_name),
+        );
+        setInventoryItems(loadedInventory);
+      } else {
+        console.error(
+          'Failed to load dashboard inventory items',
+          inventoryResult.reason,
+        );
+        failures.push('Inventory');
+      }
+
+      setCounts({
+        ...nextCounts,
+        orders: loadedOrders.length,
+        sample_requests: loadedSamples.length,
+        quotes: loadedQuotes.length,
+        accounts: loadedAccounts.length,
+        products: loadedProducts.length,
+        inventory_items: loadedInventory.length,
+      });
+
+      if (failures.length) {
+        setDashboardError(
+          `Some dashboard data failed to load: ${failures.join(', ')}.`,
+        );
+      }
+    } catch (error) {
+      console.error('Failed to load supplier command center', error);
+      setDashboardError('Unable to load the supplier command center.');
+    } finally {
+      setIsLoading(false);
+    }
+  }, [currentUser, visibleEntities]);
 
   React.useEffect(() => {
     if (!currentUser) {
       return;
     }
 
-    loadData().then();
-    setWidgetsRole({
-      role: {
-        value: currentUser?.app_role?.id,
-        label: currentUser?.app_role?.name,
-      },
-    });
-  }, [currentUser, visibleEntities]);
+    void loadDashboard();
+  }, [currentUser, loadDashboard]);
 
-  React.useEffect(() => {
-    if (!currentUser || !widgetsRole?.role?.value) {
-      return;
-    }
-
-    getWidgets(widgetsRole?.role?.value || '').then();
-  }, [widgetsRole?.role?.value]);
+  const kpiCards = [
+    {
+      label: 'Open POs',
+      value: openOrders.length,
+      detail: `${formatCount(counts.orders)} total orders`,
+      href: '/orders/orders-list',
+      icon: icon.mdiClipboardText,
+      tone: 'emerald',
+    },
+    {
+      label: 'Fulfillment due',
+      value: dueSoonOrders.length,
+      detail: 'Due inside 7 days',
+      href: '/orders/orders-list',
+      icon: icon.mdiTruckDelivery,
+      tone: 'blue',
+    },
+    {
+      label: 'Sample queue',
+      value: activeSamples.length,
+      detail: `${formatCount(counts.sample_requests)} total requests`,
+      href: '/sample_requests/sample_requests-list',
+      icon: icon.mdiPackageVariant,
+      tone: 'amber',
+    },
+    {
+      label: 'Quote follow-up',
+      value: pendingQuotes.length,
+      detail: `${formatCount(counts.quotes)} total quotes`,
+      href: '/quotes/quotes-list',
+      icon: icon.mdiFileDocumentOutline,
+      tone: 'violet',
+    },
+    {
+      label: 'Contract SKUs',
+      value: formatCount(counts.products),
+      detail: `${sampleReadyProducts.length} sample-ready`,
+      href: '/products/products-list',
+      icon: icon.mdiPackageVariantClosed,
+      tone: 'slate',
+    },
+    {
+      label: 'Spec gaps',
+      value: missingSpecProducts.length,
+      detail: 'Need product spec sheets',
+      href: '/products/products-list',
+      icon: icon.mdiFileDocumentOutline,
+      tone: 'rose',
+    },
+  ];
 
   return (
     <>
       <Head>
-        <title>{getPageTitle('Operations dashboard')}</title>
+        <title>{getPageTitle('Supplier command center')}</title>
       </Head>
       <SectionMain>
         <SectionTitleLineWithButton
           icon={icon.mdiChartTimelineVariant}
-          title='Operations dashboard'
+          title='Supplier command center'
           main
         >
           <div className='flex flex-wrap gap-2'>
             <Link
-              href='/buyer-portal'
+              href='/products/products-list'
               className='inline-flex h-10 items-center rounded-xl border border-emerald-200 bg-emerald-50 px-4 text-sm font-semibold text-emerald-800 hover:bg-emerald-100'
             >
-              Buyer portal
+              Contract catalog
             </Link>
             <Link
               href='/orders/orders-list'
@@ -326,22 +760,44 @@ const Dashboard = () => {
           </div>
         </SectionTitleLineWithButton>
 
-        <div className='mb-6 overflow-hidden rounded-2xl border border-slate-200 bg-slate-950 text-white shadow-sm'>
-          <div className='grid gap-6 p-6 lg:grid-cols-[minmax(0,1.2fr)_420px] lg:p-8'>
+        {dashboardError && (
+          <div className='mb-5 rounded-2xl border border-rose-200 bg-rose-50 p-4 text-sm font-semibold text-rose-800'>
+            {dashboardError}
+          </div>
+        )}
+
+        <section className='mb-6 overflow-hidden rounded-2xl border border-slate-200 bg-slate-950 text-white shadow-sm'>
+          <div className='grid gap-6 p-6 xl:grid-cols-[minmax(0,1fr)_420px] xl:p-8'>
             <div>
               <p className='text-xs font-semibold uppercase tracking-[0.24em] text-emerald-300'>
-                Foodservice supplier control center
+                Northstar Foodservice operations
               </p>
-              <h2 className='mt-4 max-w-3xl text-3xl font-semibold leading-tight lg:text-4xl'>
-                Manage customer pricing, catalog readiness, and fulfillment flow
-                from one strict admin workspace.
+              <h2 className='mt-4 max-w-4xl text-3xl font-semibold leading-tight lg:text-4xl'>
+                Today&apos;s control room for contract buyers, price files,
+                samples, and fulfillment handoff.
               </h2>
-              <p className='mt-4 max-w-2xl text-sm leading-7 text-slate-300'>
-                Built for suppliers and distributors serving restaurants,
-                caterers, hotels, and multi-location buyers.
+              <p className='mt-4 max-w-3xl text-sm leading-7 text-slate-300'>
+                Monitor restaurant, hotel, and catering accounts without
+                replacing POS or accounting. The portal sits between buyer
+                demand, catalog readiness, and warehouse execution.
               </p>
+              <div className='mt-6 flex flex-wrap gap-2'>
+                {[
+                  '3 PM order cutoff',
+                  'Contract catalog live',
+                  'Buyer portal active',
+                  isLoading ? 'Refreshing data' : 'Data synced',
+                ].map((label) => (
+                  <span
+                    key={label}
+                    className='rounded-full border border-white/10 bg-white/5 px-3 py-1 text-xs font-semibold text-slate-200'
+                  >
+                    {label}
+                  </span>
+                ))}
+              </div>
             </div>
-            <div className='grid gap-3 sm:grid-cols-2 lg:grid-cols-1'>
+            <div className='grid gap-3 sm:grid-cols-2 xl:grid-cols-1'>
               <div className='rounded-xl border border-white/10 bg-white/5 p-4'>
                 <p className='text-xs uppercase tracking-[0.18em] text-slate-400'>
                   Current role
@@ -352,84 +808,377 @@ const Dashboard = () => {
               </div>
               <div className='rounded-xl border border-white/10 bg-white/5 p-4'>
                 <p className='text-xs uppercase tracking-[0.18em] text-slate-400'>
-                  Active modules
+                  Active work areas
                 </p>
                 <p className='mt-2 text-lg font-semibold'>
-                  {visibleEntities.length} operational area(s)
+                  {visibleEntities.length} modules available
                 </p>
               </div>
             </div>
           </div>
-        </div>
+        </section>
 
-        <div className='mb-6 grid gap-4 md:grid-cols-2 xl:grid-cols-4'>
-          {featuredEntities.map((entity) => (
-            <Link href={entity.href} key={entity.key}>
-              <div className='h-full rounded-2xl border border-slate-200 bg-white p-5 shadow-sm transition hover:-translate-y-0.5 hover:border-emerald-200 hover:shadow-md'>
-                <div className='flex items-start justify-between gap-4'>
+        <section className='mb-6 grid gap-4 sm:grid-cols-2 xl:grid-cols-6'>
+          {kpiCards.map((card) => (
+            <Link href={card.href} key={card.label}>
+              <div className='h-full rounded-2xl border border-slate-200 bg-white p-4 shadow-sm transition hover:-translate-y-0.5 hover:border-emerald-200 hover:shadow-md'>
+                <div className='flex items-start justify-between gap-3'>
                   <div>
-                    <p className='text-xs font-semibold uppercase tracking-[0.18em] text-slate-400'>
-                      {entity.label}
+                    <p className='text-xs font-semibold uppercase tracking-[0.16em] text-slate-400'>
+                      {card.label}
                     </p>
                     <p className='mt-3 text-3xl font-semibold text-slate-950'>
-                      {formatCount(counts[entity.key])}
+                      {card.value}
                     </p>
                   </div>
-                  <span className='inline-flex h-11 w-11 items-center justify-center rounded-xl bg-emerald-50 text-emerald-700'>
-                    <BaseIcon path={entity.icon} size='22' />
+                  <span className='inline-flex h-10 w-10 items-center justify-center rounded-xl bg-emerald-50 text-emerald-700'>
+                    <BaseIcon path={card.icon} size='20' />
                   </span>
                 </div>
-                <p className='mt-4 text-sm leading-6 text-slate-500'>
-                  {entity.description}
+                <p className='mt-3 text-sm leading-6 text-slate-500'>
+                  {card.detail}
                 </p>
               </div>
             </Link>
           ))}
-        </div>
+        </section>
 
-        {hasPermission(currentUser, 'CREATE_ROLES') && (
-          <div className='mb-6 rounded-2xl border border-slate-200 bg-white p-5 shadow-sm'>
-            <WidgetCreator
-              currentUser={currentUser}
-              isFetchingQuery={isFetchingQuery}
-              setWidgetsRole={setWidgetsRole}
-              widgetsRole={widgetsRole}
-            />
-          </div>
-        )}
-
-        {!!rolesWidgets.length &&
-          hasPermission(currentUser, 'CREATE_ROLES') && (
-            <p className='mb-4 text-sm font-semibold text-slate-500'>
-              {`${widgetsRole?.role?.label || 'Users'}'s widgets`}
-            </p>
-          )}
-
-        <div className='mb-6 grid grid-cols-1 gap-4 lg:grid-cols-4'>
-          {(isFetchingQuery || loading) && (
-            <div className='flex items-center rounded-2xl border border-slate-200 bg-white p-5 text-sm font-semibold text-slate-500 shadow-sm'>
-              <BaseIcon
-                className='mr-3 animate-spin text-emerald-700'
-                size={24}
-                path={icon.mdiLoading}
-              />
-              Loading widgets...
+        <section className='mb-6 grid items-start gap-5 xl:grid-cols-[minmax(0,1.2fr)_minmax(360px,0.8fr)]'>
+          <div className='rounded-2xl border border-slate-200 bg-white p-5 shadow-sm'>
+            <div className='mb-4 flex items-start justify-between gap-3 border-b border-slate-100 pb-4'>
+              <div>
+                <p className='text-xs font-semibold uppercase tracking-[0.2em] text-emerald-700'>
+                  Fulfillment queue
+                </p>
+                <h3 className='mt-2 text-2xl font-semibold text-slate-950'>
+                  Purchase orders requiring action
+                </h3>
+              </div>
+              <Link
+                href='/orders/orders-list'
+                className='rounded-xl border border-slate-200 px-3 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50'
+              >
+                All POs
+              </Link>
             </div>
-          )}
+            <div className='space-y-3'>
+              {openOrders.map((order) => (
+                <Link
+                  key={order.id}
+                  href={`/orders/orders-view/?id=${order.id}`}
+                  className='block rounded-xl border border-slate-200 bg-slate-50 p-4 transition hover:border-emerald-200 hover:bg-emerald-50/70'
+                >
+                  <div className='flex flex-wrap items-start justify-between gap-3'>
+                    <div>
+                      <p className='text-sm font-bold text-slate-950'>
+                        {order.order_number}
+                      </p>
+                      <p className='mt-1 text-sm text-slate-600'>
+                        {order.account?.account_name || 'Unassigned account'}
+                      </p>
+                    </div>
+                    <StatusPill status={order.order_status} />
+                  </div>
+                  <div className='mt-4 grid gap-3 text-sm text-slate-600 sm:grid-cols-4'>
+                    <div>
+                      <p className='text-xs uppercase tracking-[0.14em] text-slate-400'>
+                        PO
+                      </p>
+                      <p className='mt-1 font-semibold text-slate-900'>
+                        {order.po_number || 'Pending'}
+                      </p>
+                    </div>
+                    <div>
+                      <p className='text-xs uppercase tracking-[0.14em] text-slate-400'>
+                        Ship-to
+                      </p>
+                      <p className='mt-1 font-semibold text-slate-900'>
+                        {order.location?.location_name || 'Not selected'}
+                      </p>
+                    </div>
+                    <div>
+                      <p className='text-xs uppercase tracking-[0.14em] text-slate-400'>
+                        Requested
+                      </p>
+                      <p className='mt-1 font-semibold text-slate-900'>
+                        {formatDate(order.requested_delivery_date)}
+                      </p>
+                    </div>
+                    <div>
+                      <p className='text-xs uppercase tracking-[0.14em] text-slate-400'>
+                        Total
+                      </p>
+                      <p className='mt-1 font-semibold text-slate-900'>
+                        {formatCurrency(order.order_total)}
+                      </p>
+                    </div>
+                  </div>
+                </Link>
+              ))}
+              {!openOrders.length && (
+                <EmptyState text='No open purchase orders in the current view.' />
+              )}
+            </div>
+          </div>
 
-          {rolesWidgets &&
-            rolesWidgets.map((widget, index) => (
-              <SmartWidget
-                key={widget.id || widget.name || widget.title || index}
-                userId={currentUser?.id}
-                widget={widget}
-                roleId={widgetsRole?.role?.value || ''}
-                admin={hasPermission(currentUser, 'CREATE_ROLES')}
-              />
-            ))}
-        </div>
+          <div className='grid gap-5'>
+            <div className='rounded-2xl border border-slate-200 bg-white p-5 shadow-sm'>
+              <div className='mb-4 flex items-start justify-between gap-3 border-b border-slate-100 pb-4'>
+                <div>
+                  <p className='text-xs font-semibold uppercase tracking-[0.2em] text-amber-700'>
+                    Chef samples
+                  </p>
+                  <h3 className='mt-2 text-xl font-semibold text-slate-950'>
+                    Sample requests
+                  </h3>
+                </div>
+                <Link
+                  href='/sample_requests/sample_requests-list'
+                  className='text-sm font-semibold text-emerald-700'
+                >
+                  View all
+                </Link>
+              </div>
+              <div className='space-y-3'>
+                {activeSamples.map((sample) => (
+                  <Link
+                    href={`/sample_requests/sample_requests-view/?id=${sample.id}`}
+                    key={sample.id}
+                    className='block rounded-xl border border-slate-200 bg-slate-50 p-3 hover:border-amber-200 hover:bg-amber-50'
+                  >
+                    <div className='flex items-start justify-between gap-3'>
+                      <div className='min-w-0'>
+                        <p className='truncate text-sm font-bold text-slate-950'>
+                          {sample.sample_request_number}
+                        </p>
+                        <p className='mt-1 truncate text-xs text-slate-500'>
+                          {sample.product?.product_name || 'Product pending'}
+                        </p>
+                      </div>
+                      <StatusPill status={sample.sample_status} />
+                    </div>
+                    <p className='mt-2 text-xs text-slate-500'>
+                      {sample.account?.account_name || 'Unassigned'} · needed{' '}
+                      {formatDate(sample.needed_by)}
+                    </p>
+                  </Link>
+                ))}
+                {!activeSamples.length && (
+                  <EmptyState text='No active sample requests.' />
+                )}
+              </div>
+            </div>
 
-        <div className='grid gap-5 xl:grid-cols-2'>
+            <div className='rounded-2xl border border-slate-200 bg-white p-5 shadow-sm'>
+              <div className='mb-4 flex items-start justify-between gap-3 border-b border-slate-100 pb-4'>
+                <div>
+                  <p className='text-xs font-semibold uppercase tracking-[0.2em] text-violet-700'>
+                    Sales follow-up
+                  </p>
+                  <h3 className='mt-2 text-xl font-semibold text-slate-950'>
+                    Quotes pending buyer action
+                  </h3>
+                </div>
+                <Link
+                  href='/quotes/quotes-list'
+                  className='text-sm font-semibold text-emerald-700'
+                >
+                  View all
+                </Link>
+              </div>
+              <div className='space-y-3'>
+                {pendingQuotes.map((quote) => (
+                  <Link
+                    href={`/quotes/quotes-view/?id=${quote.id}`}
+                    key={quote.id}
+                    className='block rounded-xl border border-slate-200 bg-slate-50 p-3 hover:border-violet-200 hover:bg-violet-50'
+                  >
+                    <div className='flex items-start justify-between gap-3'>
+                      <div className='min-w-0'>
+                        <p className='truncate text-sm font-bold text-slate-950'>
+                          {quote.quote_number}
+                        </p>
+                        <p className='mt-1 truncate text-xs text-slate-500'>
+                          {quote.account?.account_name || 'Unassigned account'}
+                        </p>
+                      </div>
+                      <StatusPill status={quote.quote_status} />
+                    </div>
+                    <p className='mt-2 text-xs text-slate-500'>
+                      Expires {formatDate(quote.expires_at)} ·{' '}
+                      {formatCurrency(quote.quote_total)} · owner{' '}
+                      {formatUserName(quote.owner)}
+                    </p>
+                  </Link>
+                ))}
+                {!pendingQuotes.length && (
+                  <EmptyState text='No quotes waiting for follow-up.' />
+                )}
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <section className='mb-6 grid items-start gap-5 xl:grid-cols-[minmax(0,0.9fr)_minmax(0,1.1fr)]'>
+          <div className='rounded-2xl border border-slate-200 bg-white p-5 shadow-sm'>
+            <div className='mb-4 border-b border-slate-100 pb-4'>
+              <p className='text-xs font-semibold uppercase tracking-[0.2em] text-blue-700'>
+                Buyer accounts
+              </p>
+              <h3 className='mt-2 text-2xl font-semibold text-slate-950'>
+                Priority commercial accounts
+              </h3>
+            </div>
+            <div className='space-y-3'>
+              {accounts.slice(0, 4).map((account) => {
+                const activity = accountActivity.get(account.id);
+
+                return (
+                  <Link
+                    href={`/accounts/accounts-view/?id=${account.id}`}
+                    key={account.id}
+                    className='block rounded-xl border border-slate-200 bg-slate-50 p-4 transition hover:border-blue-200 hover:bg-blue-50'
+                  >
+                    <div className='flex items-start justify-between gap-3'>
+                      <div className='min-w-0'>
+                        <p className='truncate font-bold text-slate-950'>
+                          {account.account_name}
+                        </p>
+                        <p className='mt-1 text-xs font-semibold uppercase tracking-[0.14em] text-slate-400'>
+                          {account.account_type || 'Buyer'} ·{' '}
+                          {account.account_number || 'No number'}
+                        </p>
+                      </div>
+                      <StatusPill status={account.credit_status} />
+                    </div>
+                    <div className='mt-3 grid gap-3 text-sm text-slate-600 sm:grid-cols-2'>
+                      <p>
+                        Rep:{' '}
+                        <span className='font-semibold text-slate-900'>
+                          {formatUserName(account.assigned_sales_rep)}
+                        </span>
+                      </p>
+                      <p>
+                        Open POs:{' '}
+                        <span className='font-semibold text-slate-900'>
+                          {activity?.openOrders || 0}
+                        </span>
+                      </p>
+                      <p className='sm:col-span-2'>
+                        Price file:{' '}
+                        <span className='font-semibold text-slate-900'>
+                          {account.default_price_list?.price_list_name ||
+                            'Not assigned'}
+                        </span>
+                      </p>
+                    </div>
+                  </Link>
+                );
+              })}
+              {!accounts.length && (
+                <EmptyState text='No buyer accounts available for this role.' />
+              )}
+            </div>
+          </div>
+
+          <div className='rounded-2xl border border-slate-200 bg-white p-5 shadow-sm'>
+            <div className='mb-4 flex items-start justify-between gap-3 border-b border-slate-100 pb-4'>
+              <div>
+                <p className='text-xs font-semibold uppercase tracking-[0.2em] text-emerald-700'>
+                  Catalog readiness
+                </p>
+                <h3 className='mt-2 text-2xl font-semibold text-slate-950'>
+                  Product and inventory signals
+                </h3>
+              </div>
+              <Link
+                href='/products/products-list'
+                className='rounded-xl border border-slate-200 px-3 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50'
+              >
+                Catalog
+              </Link>
+            </div>
+            <div className='grid gap-3 sm:grid-cols-3'>
+              <div className='rounded-xl bg-emerald-50 p-4'>
+                <p className='text-xs font-semibold uppercase tracking-[0.16em] text-emerald-700'>
+                  Active SKUs
+                </p>
+                <p className='mt-2 text-2xl font-semibold text-slate-950'>
+                  {activeProducts.length}
+                </p>
+              </div>
+              <div className='rounded-xl bg-blue-50 p-4'>
+                <p className='text-xs font-semibold uppercase tracking-[0.16em] text-blue-700'>
+                  Sample-ready
+                </p>
+                <p className='mt-2 text-2xl font-semibold text-slate-950'>
+                  {sampleReadyProducts.length}
+                </p>
+              </div>
+              <div className='rounded-xl bg-amber-50 p-4'>
+                <p className='text-xs font-semibold uppercase tracking-[0.16em] text-amber-700'>
+                  Missing spec
+                </p>
+                <p className='mt-2 text-2xl font-semibold text-slate-950'>
+                  {missingSpecProducts.length}
+                </p>
+              </div>
+            </div>
+            <div className='mt-4 grid gap-3 lg:grid-cols-2'>
+              <div className='rounded-xl border border-slate-200 bg-slate-50 p-4'>
+                <p className='text-sm font-bold text-slate-950'>
+                  Temperature mix
+                </p>
+                <div className='mt-3 space-y-2 text-sm text-slate-600'>
+                  {['ambient', 'refrigerated', 'frozen'].map((zone) => {
+                    const value = activeProducts.filter(
+                      (product) => product.temperature_zone === zone,
+                    ).length;
+
+                    return (
+                      <div
+                        key={zone}
+                        className='flex items-center justify-between gap-3'
+                      >
+                        <span className='capitalize'>{zone}</span>
+                        <span className='font-semibold text-slate-950'>
+                          {value} SKU(s)
+                        </span>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+              <div className='rounded-xl border border-slate-200 bg-slate-50 p-4'>
+                <p className='text-sm font-bold text-slate-950'>
+                  Stock watch
+                </p>
+                <div className='mt-3 space-y-2'>
+                  {inventoryAlerts.map((item) => (
+                    <div
+                      key={item.id}
+                      className='flex items-center justify-between gap-3 text-sm'
+                    >
+                      <span className='truncate text-slate-600'>
+                        {item.product?.product_name || item.warehouse_name}
+                      </span>
+                      <span className='font-semibold text-slate-950'>
+                        {item.available_cases || 0} cases
+                      </span>
+                    </div>
+                  ))}
+                  {!inventoryAlerts.length && (
+                    <p className='text-sm text-slate-500'>
+                      No low-stock rows in the current feed.
+                    </p>
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <section className='grid gap-5 xl:grid-cols-2'>
           {Object.entries(groupCopy).map(([groupKey, copy]) => {
             const groupEntities = visibleEntities.filter(
               (entity) => entity.group === groupKey,
@@ -440,7 +1189,7 @@ const Dashboard = () => {
             }
 
             return (
-              <section
+              <div
                 key={groupKey}
                 className='rounded-2xl border border-slate-200 bg-white p-5 shadow-sm'
               >
@@ -452,16 +1201,16 @@ const Dashboard = () => {
                     {copy.subtitle}
                   </p>
                 </div>
-                <div className='grid gap-3 md:grid-cols-2'>
+                <div className='grid gap-3 sm:grid-cols-2'>
                   {groupEntities.map((entity) => (
                     <Link href={entity.href} key={entity.key}>
                       <div className='flex h-full items-start gap-3 rounded-xl border border-slate-200 bg-slate-50 p-4 transition hover:border-emerald-200 hover:bg-emerald-50/70'>
                         <span className='mt-0.5 inline-flex h-9 w-9 flex-none items-center justify-center rounded-lg bg-white text-emerald-700 shadow-sm'>
                           <BaseIcon path={entity.icon} size='18' />
                         </span>
-                        <div>
+                        <div className='min-w-0'>
                           <div className='flex items-center gap-2'>
-                            <p className='font-semibold text-slate-950'>
+                            <p className='truncate font-semibold text-slate-950'>
                               {entity.label}
                             </p>
                             <span className='rounded-full bg-white px-2 py-0.5 text-xs font-semibold text-slate-500'>
@@ -476,17 +1225,21 @@ const Dashboard = () => {
                     </Link>
                   ))}
                 </div>
-              </section>
+              </div>
             );
           })}
-        </div>
+        </section>
       </SectionMain>
     </>
   );
 };
 
 Dashboard.getLayout = function getLayout(page: ReactElement) {
-  return <LayoutAuthenticated>{page}</LayoutAuthenticated>;
+  return (
+    <LayoutAuthenticated permission={supplierDashboardPermissions}>
+      {page}
+    </LayoutAuthenticated>
+  );
 };
 
 export default Dashboard;
diff --git a/frontend/src/pages/index.tsx b/frontend/src/pages/index.tsx
index 65393d7..379f85f 100644
--- a/frontend/src/pages/index.tsx
+++ b/frontend/src/pages/index.tsx
@@ -1,5 +1,6 @@
 import type { ReactElement } from "react";
 import Head from "next/head";
+import Link from "next/link";
 import React from "react";
 
 import LayoutGuest from "../layouts/Guest";
@@ -182,14 +183,14 @@ export default function HomePage() {
       <div className="min-h-screen bg-stone-50 text-slate-950">
         <header className="border-b border-stone-200 bg-stone-50/95 backdrop-blur">
           <div className="mx-auto flex max-w-7xl flex-wrap items-center justify-between gap-4 px-6 py-4">
-            <a href="/" className="group block">
+            <Link href="/" className="group block">
               <p className="text-xs font-semibold uppercase tracking-[0.24em] text-emerald-700">
                 Northstar Foodservice
               </p>
               <p className="mt-1 text-lg font-semibold text-slate-950">
                 Supplier / Distributor B2B Portal
               </p>
-            </a>
+            </Link>
             <nav className="flex flex-wrap items-center gap-2 text-sm font-semibold">
               <a
                 href="#catalog"
@@ -203,18 +204,12 @@ export default function HomePage() {
               >
                 Operations
               </a>
-              <a
+              <Link
                 href="/login"
-                className="rounded-full border border-slate-300 bg-white px-4 py-2 text-slate-900 shadow-sm"
-              >
-                Login
-              </a>
-              <a
-                href="/buyer-login?returnTo=%2Fbuyer-portal%2F"
                 className="rounded-full bg-slate-950 px-5 py-2 text-white shadow-sm"
               >
-                Open portal
-              </a>
+                Sign in
+              </Link>
             </nav>
           </div>
         </header>
@@ -243,23 +238,23 @@ export default function HomePage() {
                 spreadsheets or PDF price sheets.
               </p>
               <div className="mt-8 flex flex-wrap gap-3">
-                <a
-                  href="/buyer-login?returnTo=%2Fbuyer-portal%2F"
+                <Link
+                  href="/login"
                   className="rounded-full bg-emerald-400 px-6 py-3 text-sm font-bold text-slate-950 shadow-lg"
                 >
-                  Open buyer portal
-                </a>
+                  Sign in
+                </Link>
                 <a
-                  href="/dashboard"
+                  href="#catalog"
                   className="rounded-full border border-slate-300 bg-white/80 px-6 py-3 text-sm font-bold text-slate-950 shadow-sm backdrop-blur"
                 >
-                  Admin workspace
+                  View catalog
                 </a>
                 <a
-                  href="/login"
+                  href="#operations"
                   className="rounded-full border border-slate-300 bg-white/55 px-6 py-3 text-sm font-bold text-slate-900 backdrop-blur"
                 >
-                  Sign in
+                  Operations
                 </a>
               </div>
               <div className="mt-10 grid max-w-5xl gap-3 sm:grid-cols-3">
@@ -516,12 +511,12 @@ export default function HomePage() {
                     Checkout review flags PO, delivery location, MOQ, and item
                     availability before the order reaches the distributor team.
                   </div>
-                  <a
-                    href="/buyer-login?returnTo=%2Fbuyer-portal%2F"
+                  <Link
+                    href="/login"
                     className="mt-4 block rounded-xl bg-emerald-500 px-5 py-4 text-center text-sm font-bold text-slate-950"
                   >
-                    Continue in real buyer portal
-                  </a>
+                    Sign in to continue
+                  </Link>
                 </div>
 
                 <div className="overflow-hidden border border-stone-200 bg-white shadow-sm">
@@ -615,8 +610,7 @@ export default function HomePage() {
                   Try the vertical slice
                 </p>
                 <h2 className="mt-3 text-3xl font-semibold">
-                  Open the buyer portal, then inspect the generated admin
-                  modules.
+                  Sign in once, then land in the workspace your role allows.
                 </h2>
                 <p className="mt-4 text-base leading-8 text-slate-300">
                   This gives us a believable first version for the restaurant
@@ -626,23 +620,23 @@ export default function HomePage() {
                 </p>
               </div>
               <div className="grid gap-3">
-                <a
-                  href="/buyer-login?returnTo=%2Fbuyer-portal%2F"
+                <Link
+                  href="/login"
                   className="rounded-xl bg-emerald-400 px-5 py-4 text-center text-sm font-bold text-slate-950"
                 >
-                  Open buyer portal
-                </a>
+                  Sign in
+                </Link>
                 <a
-                  href="/dashboard"
+                  href="#catalog"
                   className="rounded-xl border border-white/20 px-5 py-4 text-center text-sm font-bold text-white"
                 >
-                  Admin dashboard
+                  Review catalog flow
                 </a>
                 <a
-                  href="/products/products-list"
+                  href="#operations"
                   className="rounded-xl border border-white/20 px-5 py-4 text-center text-sm font-bold text-white"
                 >
-                  Product admin
+                  Review operations flow
                 </a>
               </div>
             </div>
diff --git a/frontend/src/pages/login.tsx b/frontend/src/pages/login.tsx
index 1803706..96eb34f 100644
--- a/frontend/src/pages/login.tsx
+++ b/frontend/src/pages/login.tsx
@@ -9,14 +9,12 @@ import LayoutGuest from '../layouts/Guest';
 import { getPageTitle } from '../config';
 import { findMe, loginUser, resetAction } from '../stores/authSlice';
 import { useAppDispatch, useAppSelector } from '../stores/hooks';
+import { hasPermission } from '../helpers/userPermissions';
 
 const heroImage =
   'https://images.pexels.com/photos/1126728/pexels-photo-1126728.jpeg?auto=compress&cs=tinysrgb&w=1800';
 
-const teamImage =
-  'https://images.pexels.com/photos/6169659/pexels-photo-6169659.jpeg?auto=compress&cs=tinysrgb&w=900';
-
-const staffCredentials = [
+const demoCredentials = [
   {
     label: 'Supplier admin',
     role: 'Administrator',
@@ -26,20 +24,28 @@ const staffCredentials = [
     note: 'Full access to catalog, buyer accounts, price lists, orders, samples, and fulfillment workflows.',
   },
   {
-    label: 'Demo user',
-    role: 'User',
-    name: 'Standard SaaS user',
-    email: 'client@hello.com',
+    label: 'Buyer admin',
+    role: 'Customer Buyer Admin',
+    name: 'Maria Alvarez',
+    email: 'maria.alvarez@harbortable.com',
     password: 'a04a876c6d59',
-    note: 'Lightweight generated SaaS user for smoke checks outside the buyer-specific workspace.',
+    note: 'Purchasing lead with order, sample, quote, saved guide, and team queue access.',
+  },
+  {
+    label: 'Buyer user',
+    role: 'Customer Buyer',
+    name: 'Owen Price',
+    email: 'owen.price@harbortable.com',
+    password: 'a04a876c6d59',
+    note: 'Restaurant buyer focused on contract catalog, reorder history, sample requests, and PO checkout.',
   },
 ];
 
 export default function Login() {
   const router = useRouter();
   const dispatch = useAppDispatch();
-  const [email, setEmail] = useState(staffCredentials[0].email);
-  const [password, setPassword] = useState(staffCredentials[0].password);
+  const [email, setEmail] = useState(demoCredentials[0].email);
+  const [password, setPassword] = useState(demoCredentials[0].password);
   const [remember, setRemember] = useState(true);
   const [showPassword, setShowPassword] = useState(false);
   const {
@@ -50,7 +56,28 @@ export default function Login() {
     notify: notifyState,
   } = useAppSelector((state) => state.auth);
 
-  const title = 'B2B Distributor Portal';
+  const getReturnTo = () => {
+    const value = Array.isArray(router.query.returnTo)
+      ? router.query.returnTo[0]
+      : router.query.returnTo;
+
+    if (value && value.startsWith('/') && !value.startsWith('//')) {
+      return value;
+    }
+
+    return '';
+  };
+
+  useEffect(() => {
+    if (!router.isReady) {
+      return;
+    }
+
+    if (getReturnTo().startsWith('/buyer-portal')) {
+      setEmail(demoCredentials[1].email);
+      setPassword(demoCredentials[1].password);
+    }
+  }, [router.isReady]);
 
   useEffect(() => {
     if (token) {
@@ -60,18 +87,31 @@ export default function Login() {
 
   useEffect(() => {
     if (currentUser?.id) {
-      if (
-        ['Customer Buyer Admin', 'Customer Buyer'].includes(
-          currentUser.app_role?.name,
-        )
-      ) {
-        router.push('/buyer-portal');
+      const returnTo = getReturnTo();
+
+      if (returnTo) {
+        router.push(returnTo);
         return;
       }
 
-      router.push('/dashboard');
+      const hasSupplierAccess = hasPermission(currentUser, [
+        'READ_ACCOUNTS',
+        'READ_PRODUCTS',
+        'READ_ORDERS',
+        'READ_INVENTORY_ITEMS',
+      ]);
+
+      if (
+        hasPermission(currentUser, 'READ_BUYER_PORTAL') &&
+        !hasSupplierAccess
+      ) {
+        router.push('/buyer-portal/');
+        return;
+      }
+
+      router.push('/dashboard/');
     }
-  }, [currentUser?.id, router]);
+  }, [currentUser, router]);
 
   useEffect(() => {
     if (errorMessage) {
@@ -86,7 +126,7 @@ export default function Login() {
     }
   }, [notifyState?.showNotification, notifyState?.textNotification, dispatch]);
 
-  const applyCredentials = (credentials: (typeof staffCredentials)[number]) => {
+  const applyCredentials = (credentials: (typeof demoCredentials)[number]) => {
     setEmail(credentials.email);
     setPassword(credentials.password);
     setRemember(true);
@@ -103,12 +143,12 @@ export default function Login() {
         <title>{getPageTitle('Login')}</title>
         <meta
           name='description'
-          content='Staff sign in for the Northstar Foodservice supplier and distributor portal.'
+          content='Unified sign in for the Northstar Foodservice supplier and distributor portal.'
         />
       </Head>
 
       <main className='min-h-screen bg-stone-50 text-slate-950'>
-        <section className='grid min-h-screen lg:grid-cols-[minmax(0,1.1fr)_520px]'>
+        <section className='grid min-h-screen lg:grid-cols-[minmax(0,1.1fr)_500px]'>
           <div className='relative hidden overflow-hidden lg:block'>
             <img
               src={heroImage}
@@ -122,12 +162,12 @@ export default function Login() {
                   Northstar Foodservice
                 </p>
                 <h1 className='mt-5 max-w-2xl text-5xl font-semibold leading-tight'>
-                  Staff workspace for distributor operations
+                  One sign-in for supplier teams and foodservice buyers
                 </h1>
                 <p className='mt-5 max-w-xl text-base leading-8 text-stone-100'>
-                  Manage account-specific pricing, product catalogs, buyer
-                  orders, sample requests, saved lists, and fulfillment handoff
-                  from one generated SaaS admin.
+                  Route each role into the right workspace for contract
+                  pricing, product catalogs, purchase orders, sample requests,
+                  saved lists, and fulfillment handoff.
                 </p>
               </div>
 
@@ -154,7 +194,7 @@ export default function Login() {
             </div>
           </div>
 
-          <div className='flex items-center justify-center px-6 py-10'>
+          <div className='flex items-center justify-center px-5 py-4 lg:py-2'>
             <div className='w-full max-w-md'>
               <div className='flex items-center justify-between gap-4'>
                 <Link
@@ -163,35 +203,27 @@ export default function Login() {
                 >
                   Back to portal overview
                 </Link>
-                <Link
-                  href='/buyer-login/?returnTo=%2Fbuyer-portal%2F'
-                  className='text-sm font-semibold text-slate-500 hover:text-emerald-700'
-                >
-                  Buyer login
-                </Link>
+                <span className='text-sm font-semibold text-slate-500'>
+                  One login for every role
+                </span>
               </div>
 
-              <div className='mt-8 overflow-hidden border border-stone-200 bg-white shadow-sm'>
-                <img
-                  src={teamImage}
-                  alt='Foodservice operations team preparing restaurant orders'
-                  className='h-36 w-full object-cover sm:h-44'
-                />
-                <div className='p-5 sm:p-6'>
+              <div className='mt-3 overflow-hidden border border-stone-200 bg-white shadow-sm'>
+                <div className='h-1 bg-emerald-500' />
+                <div className='p-3 sm:p-4'>
                   <p className='text-xs font-semibold uppercase tracking-[0.22em] text-emerald-700'>
-                    Staff sign in
+                    Unified sign in
                   </p>
-                  <h2 className='mt-3 text-2xl font-semibold sm:text-3xl'>
-                    Open the supplier admin
+                  <h2 className='mt-2 text-2xl font-semibold'>
+                    Open your workspace
                   </h2>
-                  <p className='mt-3 text-sm leading-6 text-slate-600 sm:leading-7'>
-                    Sign in to manage the operational side of the B2B
-                    distributor portal: products, customer accounts, contract
-                    pricing, orders, quotes, and sample workflows.
+                  <p className='mt-2 text-sm leading-6 text-slate-600'>
+                    Use supplier or buyer credentials. The app routes each user
+                    into the right workspace based on role permissions.
                   </p>
 
-                  <div className='mt-4 grid gap-2 sm:mt-5 sm:gap-3'>
-                    {staffCredentials.map((credentials) => {
+                  <div className='mt-3 grid gap-2'>
+                    {demoCredentials.map((credentials) => {
                       const isActive =
                         email === credentials.email &&
                         password === credentials.password;
@@ -201,49 +233,65 @@ export default function Login() {
                           key={credentials.email}
                           type='button'
                           onClick={() => applyCredentials(credentials)}
-                          className={`rounded-2xl border p-3 text-left transition sm:p-4 ${
+                          className={`rounded-xl border px-3 py-2.5 text-left transition ${
                             isActive
                               ? 'border-emerald-300 bg-emerald-50'
                               : 'border-stone-200 bg-stone-50 hover:border-emerald-200 hover:bg-emerald-50'
                           }`}
                         >
-                          <div className='flex items-start justify-between gap-3'>
-                            <div>
-                              <p className='text-sm font-bold text-slate-950'>
-                                {credentials.label}
-                              </p>
-                              <p className='mt-1 text-xs font-semibold uppercase tracking-[0.16em] text-emerald-700'>
+                          <div className='grid gap-2 sm:grid-cols-[minmax(0,1fr)_170px] sm:items-center'>
+                            <div className='min-w-0'>
+                              <div className='flex items-center gap-2'>
+                                <p className='truncate text-sm font-bold text-slate-950'>
+                                  {credentials.label}
+                                </p>
+                                {isActive && (
+                                  <span className='rounded-full bg-emerald-600 px-2 py-0.5 text-[10px] font-bold uppercase tracking-[0.12em] text-white'>
+                                    Active
+                                  </span>
+                                )}
+                              </div>
+                              <p className='mt-1 text-[10px] font-semibold uppercase tracking-[0.14em] text-emerald-700'>
                                 {credentials.role}
                               </p>
                             </div>
-                            <span className='rounded-full bg-white px-3 py-1 text-xs font-semibold text-slate-600 shadow-sm'>
-                              Use creds
+                            <div className='flex min-w-0 items-center justify-between gap-2 sm:block'>
+                              <div className='min-w-0'>
+                                <p className='truncate text-xs font-semibold text-slate-900 sm:hidden'>
+                                  {credentials.name}
+                                </p>
+                                <p className='truncate font-mono text-xs text-slate-600'>
+                                  {credentials.email}
+                                </p>
+                                <p className='font-mono text-xs text-slate-500'>
+                                  {credentials.password}
+                                </p>
+                              </div>
+                              <span className='shrink-0 rounded-full bg-white px-2.5 py-1 text-xs font-semibold text-slate-600 shadow-sm sm:hidden'>
+                                Use
+                              </span>
+                            </div>
+                          </div>
+                          <div className='mt-1 hidden items-center justify-between gap-2 sm:flex'>
+                            <p className='truncate text-xs font-semibold text-slate-900'>
+                              {credentials.name}
+                            </p>
+                            <span className='rounded-full bg-white px-2.5 py-1 text-xs font-semibold text-slate-600 shadow-sm'>
+                              Use
                             </span>
                           </div>
-                          <p className='mt-3 text-sm font-semibold text-slate-900'>
-                            {credentials.name}
-                          </p>
-                          <p className='mt-1 break-all font-mono text-xs text-slate-600'>
-                            {credentials.email}
-                          </p>
-                          <p className='mt-1 font-mono text-xs text-slate-500'>
-                            {credentials.password}
-                          </p>
-                          <p className='mt-3 hidden text-xs leading-5 text-slate-500 sm:block'>
-                            {credentials.note}
-                          </p>
                         </button>
                       );
                     })}
                   </div>
 
                   {errorMessage && (
-                    <div className='mt-5 rounded-2xl border border-rose-200 bg-rose-50 p-4 text-sm text-rose-800'>
+                    <div className='mt-4 rounded-xl border border-rose-200 bg-rose-50 p-3 text-sm text-rose-800'>
                       {errorMessage}
                     </div>
                   )}
 
-                  <form className='mt-6 space-y-4' onSubmit={handleSubmit}>
+                  <form className='mt-4 space-y-3' onSubmit={handleSubmit}>
                     <label className='block'>
                       <span className='text-sm font-semibold text-slate-900'>
                         Email
@@ -254,7 +302,7 @@ export default function Login() {
                         onChange={(event) => setEmail(event.target.value)}
                         type='email'
                         autoComplete='email'
-                        className='mt-2 h-12 w-full rounded-xl border border-stone-300 bg-white px-4 text-slate-950 outline-none focus:border-emerald-500 focus:ring-2 focus:ring-emerald-100'
+                        className='mt-1.5 h-11 w-full rounded-xl border border-stone-300 bg-white px-4 text-slate-950 outline-none focus:border-emerald-500 focus:ring-2 focus:ring-emerald-100'
                       />
                     </label>
 
@@ -262,7 +310,7 @@ export default function Login() {
                       <span className='text-sm font-semibold text-slate-900'>
                         Password
                       </span>
-                      <div className='mt-2 flex h-12 overflow-hidden rounded-xl border border-stone-300 bg-white focus-within:border-emerald-500 focus-within:ring-2 focus-within:ring-emerald-100'>
+                      <div className='mt-1.5 flex h-11 overflow-hidden rounded-xl border border-stone-300 bg-white focus-within:border-emerald-500 focus-within:ring-2 focus:ring-emerald-100'>
                         <input
                           name='password'
                           value={password}
@@ -304,38 +352,14 @@ export default function Login() {
                     <button
                       type='submit'
                       disabled={isFetching}
-                      className='h-12 w-full rounded-xl bg-emerald-500 px-5 text-sm font-bold text-slate-950 shadow-sm transition hover:bg-emerald-400 disabled:cursor-not-allowed disabled:opacity-70'
+                      className='h-11 w-full rounded-xl bg-emerald-500 px-5 text-sm font-bold text-slate-950 shadow-sm transition hover:bg-emerald-400 disabled:cursor-not-allowed disabled:opacity-70'
                     >
-                      {isFetching ? 'Signing in...' : 'Sign in to admin'}
+                      {isFetching ? 'Signing in...' : 'Sign in'}
                     </button>
                   </form>
 
-                  <div className='mt-5 rounded-2xl bg-stone-50 p-4 text-sm leading-7 text-slate-600'>
-                    Need buyer access instead? Use the dedicated buyer login for
-                    customer-side catalog, reorder, sample, and PO workflows.
-                  </div>
-
-                  <p className='mt-5 text-center text-sm text-slate-500'>
-                    Do not have an account yet?{' '}
-                    <Link
-                      className='font-semibold text-emerald-700'
-                      href='/register'
-                    >
-                      New Account
-                    </Link>
-                  </p>
                 </div>
               </div>
-
-              <div className='mt-6 flex justify-center gap-4 text-xs text-slate-500'>
-                <span>© 2026 {title}</span>
-                <Link
-                  href='/privacy-policy/'
-                  className='hover:text-emerald-700'
-                >
-                  Privacy Policy
-                </Link>
-              </div>
             </div>
           </div>
         </section>
diff --git a/frontend/src/pages/orders/orders-list.tsx b/frontend/src/pages/orders/orders-list.tsx
index 0ce0e61..02b1bf2 100644
--- a/frontend/src/pages/orders/orders-list.tsx
+++ b/frontend/src/pages/orders/orders-list.tsx
@@ -25,7 +25,6 @@ const OrdersTablesPage = () => {
   const [filterItems, setFilterItems] = useState([]);
   const [csvFile, setCsvFile] = useState<File | null>(null);
   const [isModalActive, setIsModalActive] = useState(false);
-  const [showTableView, setShowTableView] = useState(false);
 
   
   const { currentUser } = useAppSelector((state) => state.auth);
@@ -34,10 +33,10 @@ const OrdersTablesPage = () => {
   const dispatch = useAppDispatch();
 
 
-  const [filters] = useState([{label: 'Ordernumber', title: 'order_number'},{label: 'POnumber', title: 'po_number'},{label: 'Buyernotes', title: 'buyer_notes'},{label: 'Internalnotes', title: 'internal_notes'},
+  const [filters] = useState([{label: 'Order number', title: 'order_number'},{label: 'PO number', title: 'po_number'},{label: 'Buyer notes', title: 'buyer_notes'},{label: 'Internal notes', title: 'internal_notes'},
           
-          {label: 'Subtotal', title: 'subtotal', number: 'true'},{label: 'Taxtotal', title: 'tax_total', number: 'true'},{label: 'Shippingtotal', title: 'shipping_total', number: 'true'},{label: 'Ordertotal', title: 'order_total', number: 'true'},
-          {label: 'Orderedat', title: 'ordered_at', date: 'true'},{label: 'Requesteddeliverydate', title: 'requested_delivery_date', date: 'true'},{label: 'Promiseddeliverydate', title: 'promised_delivery_date', date: 'true'},
+          {label: 'Subtotal', title: 'subtotal', number: 'true'},{label: 'Tax total', title: 'tax_total', number: 'true'},{label: 'Shipping total', title: 'shipping_total', number: 'true'},{label: 'Order total', title: 'order_total', number: 'true'},
+          {label: 'Ordered at', title: 'ordered_at', date: 'true'},{label: 'Requested delivery date', title: 'requested_delivery_date', date: 'true'},{label: 'Promised delivery date', title: 'promised_delivery_date', date: 'true'},
     
     
     {label: 'Account', title: 'account'},
@@ -52,7 +51,7 @@ const OrdersTablesPage = () => {
     
     
           
-          {label: 'Orderstatus', title: 'order_status', type: 'enum', options: ['draft','submitted','approved','picking','shipped','delivered','cancelled']},{label: 'Paymentterms', title: 'payment_terms', type: 'enum', options: ['net_15','net_30','net_45','prepaid']},
+          {label: 'Order status', title: 'order_status', type: 'enum', options: ['draft','submitted','approved','picking','shipped','delivered','cancelled']},{label: 'Payment terms', title: 'payment_terms', type: 'enum', options: ['net_15','net_30','net_45','prepaid']},
   ]);
     
     const hasCreatePermission = currentUser && hasPermission(currentUser, 'CREATE_ORDERS');
@@ -98,28 +97,28 @@ const OrdersTablesPage = () => {
   return (
     <>
       <Head>
-        <title>{getPageTitle('Orders')}</title>
+        <title>{getPageTitle('Purchase orders')}</title>
       </Head>
       <SectionMain>
-        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Orders" main>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Purchase orders" main>
         {''}
         </SectionTitleLineWithButton>
         <CardBox   className='mb-6' cardBoxClassName='flex flex-wrap'>
           
-            {hasCreatePermission && <BaseButton className={'mr-3'} href={'/orders/orders-new'} color='info' label='New Item'/>}
+            {hasCreatePermission && <BaseButton className={'mr-3'} href={'/orders/orders-new'} color='info' label='Add order'/>}
           
           <BaseButton
               className={'mr-3'}
               color='info'
-              label='Filter'
+              label='Add filter'
               onClick={addFilter}
           />
-          <BaseButton className={'mr-3'} color='info' label='Download CSV' onClick={getOrdersCSV} />
+          <BaseButton className={'mr-3'} color='info' label='Export CSV' onClick={getOrdersCSV} />
           
             {hasCreatePermission && (
               <BaseButton
                 color='info'
-                label='Upload CSV'
+                label='Import CSV'
                 onClick={() => setIsModalActive(true)}
               />
             )}
@@ -129,7 +128,7 @@ const OrdersTablesPage = () => {
           </div>  
           
             <div className='md:inline-flex items-center ms-auto'>
-              <Link href={'/orders/orders-table'}>Switch to Table</Link>
+              <Link href={'/orders/orders-table'}>Table view</Link>
             </div>
           
         </CardBox>
diff --git a/frontend/src/pages/orders/orders-table.tsx b/frontend/src/pages/orders/orders-table.tsx
index 551cb4a..57d2c67 100644
--- a/frontend/src/pages/orders/orders-table.tsx
+++ b/frontend/src/pages/orders/orders-table.tsx
@@ -25,7 +25,6 @@ const OrdersTablesPage = () => {
   const [filterItems, setFilterItems] = useState([]);
   const [csvFile, setCsvFile] = useState<File | null>(null);
   const [isModalActive, setIsModalActive] = useState(false);
-  const [showTableView, setShowTableView] = useState(false);
 
   
   const { currentUser } = useAppSelector((state) => state.auth);
@@ -34,10 +33,10 @@ const OrdersTablesPage = () => {
   const dispatch = useAppDispatch();
 
 
-  const [filters] = useState([{label: 'Ordernumber', title: 'order_number'},{label: 'POnumber', title: 'po_number'},{label: 'Buyernotes', title: 'buyer_notes'},{label: 'Internalnotes', title: 'internal_notes'},
+  const [filters] = useState([{label: 'Order number', title: 'order_number'},{label: 'PO number', title: 'po_number'},{label: 'Buyer notes', title: 'buyer_notes'},{label: 'Internal notes', title: 'internal_notes'},
           
-          {label: 'Subtotal', title: 'subtotal', number: 'true'},{label: 'Taxtotal', title: 'tax_total', number: 'true'},{label: 'Shippingtotal', title: 'shipping_total', number: 'true'},{label: 'Ordertotal', title: 'order_total', number: 'true'},
-          {label: 'Orderedat', title: 'ordered_at', date: 'true'},{label: 'Requesteddeliverydate', title: 'requested_delivery_date', date: 'true'},{label: 'Promiseddeliverydate', title: 'promised_delivery_date', date: 'true'},
+          {label: 'Subtotal', title: 'subtotal', number: 'true'},{label: 'Tax total', title: 'tax_total', number: 'true'},{label: 'Shipping total', title: 'shipping_total', number: 'true'},{label: 'Order total', title: 'order_total', number: 'true'},
+          {label: 'Ordered at', title: 'ordered_at', date: 'true'},{label: 'Requested delivery date', title: 'requested_delivery_date', date: 'true'},{label: 'Promised delivery date', title: 'promised_delivery_date', date: 'true'},
     
     
     {label: 'Account', title: 'account'},
@@ -52,7 +51,7 @@ const OrdersTablesPage = () => {
     
     
               
-          {label: 'Orderstatus', title: 'order_status', type: 'enum', options: ['draft','submitted','approved','picking','shipped','delivered','cancelled']},{label: 'Paymentterms', title: 'payment_terms', type: 'enum', options: ['net_15','net_30','net_45','prepaid']},
+          {label: 'Order status', title: 'order_status', type: 'enum', options: ['draft','submitted','approved','picking','shipped','delivered','cancelled']},{label: 'Payment terms', title: 'payment_terms', type: 'enum', options: ['net_15','net_30','net_45','prepaid']},
   ]);
     
     const hasCreatePermission = currentUser && hasPermission(currentUser, 'CREATE_ORDERS');
@@ -98,28 +97,28 @@ const OrdersTablesPage = () => {
   return (
     <>
       <Head>
-        <title>{getPageTitle('Orders')}</title>
+        <title>{getPageTitle('Purchase orders table')}</title>
       </Head>
       <SectionMain>
-        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Orders" main>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Purchase orders table" main>
         {''}
         </SectionTitleLineWithButton>
         <CardBox className='mb-6' cardBoxClassName='flex flex-wrap'>
           
-            {hasCreatePermission && <BaseButton className={'mr-3'} href={'/orders/orders-new'} color='info' label='New Item'/>}
+            {hasCreatePermission && <BaseButton className={'mr-3'} href={'/orders/orders-new'} color='info' label='Add order'/>}
           
           <BaseButton
               className={'mr-3'}
               color='info'
-              label='Filter'
+              label='Add filter'
               onClick={addFilter}
           />
-          <BaseButton className={'mr-3'} color='info' label='Download CSV' onClick={getOrdersCSV} />
+          <BaseButton className={'mr-3'} color='info' label='Export CSV' onClick={getOrdersCSV} />
           
             {hasCreatePermission && (
               <BaseButton
                 color='info'
-                label='Upload CSV'
+                label='Import CSV'
                 onClick={() => setIsModalActive(true)}
               />
             )}
@@ -128,7 +127,7 @@ const OrdersTablesPage = () => {
             <div id='delete-rows-button'></div>
             
               <Link href={'/orders/orders-list'}>
-                Back to <span className='capitalize'>kanban</span>
+                Card view
               </Link>
             
           </div>
diff --git a/frontend/src/pages/orders/orders-view.tsx b/frontend/src/pages/orders/orders-view.tsx
index 2a71d58..a2de578 100644
--- a/frontend/src/pages/orders/orders-view.tsx
+++ b/frontend/src/pages/orders/orders-view.tsx
@@ -1,955 +1,376 @@
 import React, { ReactElement, useEffect } from 'react';
 import Head from 'next/head'
-import DatePicker from "react-datepicker";
-import "react-datepicker/dist/react-datepicker.css";
-import dayjs from "dayjs";
-import {useAppDispatch, useAppSelector} from "../../stores/hooks";
-import {useRouter} from "next/router";
+import { useAppDispatch, useAppSelector } from "../../stores/hooks";
+import { useRouter } from "next/router";
 import { fetch } from '../../stores/orders/ordersSlice'
-import {saveFile} from "../../helpers/fileSaver";
 import dataFormatter from '../../helpers/dataFormatter';
-import ImageField from "../../components/ImageField";
 import LayoutAuthenticated from "../../layouts/Authenticated";
-import {getPageTitle} from "../../config";
+import { getPageTitle } from "../../config";
 import SectionTitleLineWithButton from "../../components/SectionTitleLineWithButton";
 import SectionMain from "../../components/SectionMain";
-import CardBox from "../../components/CardBox";
 import BaseButton from "../../components/BaseButton";
-import BaseDivider from "../../components/BaseDivider";
-import {mdiChartTimelineVariant} from "@mdi/js";
-import {SwitchField} from "../../components/SwitchField";
-import FormField from "../../components/FormField";
+import { mdiChartTimelineVariant } from "@mdi/js";
 
 
+const orderSteps = ['submitted', 'approved', 'picking', 'shipped', 'delivered'];
+
+const readableValue = (value) => {
+  if (!value) {
+    return 'Not set';
+  }
+
+  return String(value).replace(/_/g, ' ');
+};
+
+const relatedArray = (value) => {
+  if (Array.isArray(value)) {
+    return value;
+  }
+
+  return [];
+};
+
+const formatMoney = (value) => {
+  if (value === null || value === undefined || value === '') {
+    return '$0.00';
+  }
+
+  const amount = Number(value);
+  if (Number.isNaN(amount)) {
+    return value;
+  }
+
+  return amount.toLocaleString('en-US', {
+    style: 'currency',
+    currency: 'USD',
+    maximumFractionDigits: 2,
+  });
+};
+
+const formatDate = (value) => {
+  if (!value) {
+    return 'Not scheduled';
+  }
+
+  return dataFormatter.dateTimeFormatter(value);
+};
+
+const badgeClasses = (value) => {
+  if (value === 'delivered' || value === 'shipped' || value === 'approved' || value === 'submitted') {
+    return 'border-emerald-200 bg-emerald-50 text-emerald-800 dark:border-emerald-800 dark:bg-emerald-950 dark:text-emerald-100';
+  }
+
+  if (value === 'picking' || value === 'draft') {
+    return 'border-amber-200 bg-amber-50 text-amber-800 dark:border-amber-800 dark:bg-amber-950 dark:text-amber-100';
+  }
+
+  if (value === 'cancelled' || value === 'void') {
+    return 'border-rose-200 bg-rose-50 text-rose-800 dark:border-rose-800 dark:bg-rose-950 dark:text-rose-100';
+  }
+
+  return 'border-slate-200 bg-slate-50 text-slate-700 dark:border-dark-700 dark:bg-dark-800 dark:text-slate-200';
+};
+
+const StatusBadge = ({ value }) => (
+  <span className={`inline-flex rounded-full border px-3 py-1 text-xs font-semibold capitalize ${badgeClasses(value)}`}>
+    {readableValue(value)}
+  </span>
+);
+
+const InfoCard = ({ label, value }) => (
+  <div className='rounded-xl border border-slate-200 bg-white p-4 dark:border-dark-700 dark:bg-dark-900'>
+    <div className='text-xs font-bold uppercase tracking-[0.16em] text-slate-500 dark:text-slate-400'>{label}</div>
+    <div className='mt-2 text-lg font-semibold text-slate-950 dark:text-white'>{value}</div>
+  </div>
+);
+
+const SectionPanel = ({ title, subtitle, children }) => (
+  <section className='rounded-2xl border border-slate-200 bg-white shadow-sm dark:border-dark-700 dark:bg-dark-900'>
+    <div className='border-b border-slate-200 p-5 dark:border-dark-700'>
+      <h2 className='text-lg font-semibold text-slate-950 dark:text-white'>{title}</h2>
+      {subtitle && <p className='mt-1 text-sm text-slate-500 dark:text-slate-400'>{subtitle}</p>}
+    </div>
+    <div className='p-5'>{children}</div>
+  </section>
+);
+
+const EmptyState = ({ label }) => (
+  <div className='rounded-xl border border-dashed border-slate-300 bg-slate-50 p-6 text-center text-sm text-slate-500 dark:border-dark-700 dark:bg-dark-800 dark:text-slate-400'>
+    {label}
+  </div>
+);
+
+const DetailMeta = ({ label, value }) => (
+  <div>
+    <div className='text-xs font-bold uppercase tracking-[0.16em] text-slate-500 dark:text-slate-400'>{label}</div>
+    <div className='mt-1 font-semibold text-slate-950 dark:text-white'>{value}</div>
+  </div>
+);
+
+const productLabel = (item) => {
+  if (item.product?.product_name) {
+    return item.product.product_name;
+  }
+
+  if (item.product?.sku) {
+    return item.product.sku;
+  }
+
+  if (item.productId) {
+    return `Product ${String(item.productId).slice(-6)}`;
+  }
+
+  return 'Catalog item';
+};
+
 const OrdersView = () => {
     const router = useRouter()
     const dispatch = useAppDispatch()
     const { orders } = useAppSelector((state) => state.orders)
-    
 
     const { id } = router.query;
-    
-    function removeLastCharacter(str) {
-      console.log(str,`str`)
-      return str.slice(0, -1);
-    }
 
     useEffect(() => {
         dispatch(fetch({ id }));
     }, [dispatch, id]);
 
+    const orderItems = relatedArray(orders?.order_items_order);
+    const shipments = relatedArray(orders?.shipments_order);
+    const orderNumber = orders?.order_number || 'Purchase order';
+    const accountName = orders?.account?.account_name || 'No account';
+    const buyerName = [orders?.buyer?.firstName, orders?.buyer?.lastName].filter(Boolean).join(' ') || 'No buyer';
+    const location = orders?.location;
+    const deliveryAddress = location ? [
+      location.address_line_1,
+      location.address_line_2,
+      [location.city, location.state, location.postal_code].filter(Boolean).join(', '),
+    ].filter(Boolean) : [];
+    const statusIndex = orderSteps.indexOf(orders?.order_status);
 
     return (
       <>
           <Head>
-              <title>{getPageTitle('View orders')}</title>
+              <title>{getPageTitle(orderNumber)}</title>
           </Head>
           <SectionMain>
-            <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={removeLastCharacter('View orders')} main>
+            <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Purchase order" main>
                 <BaseButton
                   color='info'
-                  label='Edit'
+                  label='Edit order'
                   href={`/orders/orders-edit/?id=${id}`}
                 />
             </SectionTitleLineWithButton>
-            <CardBox>
-            
 
-              
-                <div className={'mb-4'}>
-                    <p className={'block font-bold mb-2'}>Ordernumber</p>
-                    <p>{orders?.order_number}</p>
+            <div className='space-y-6'>
+              <div className='overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm dark:border-dark-700 dark:bg-dark-900'>
+                <div className='grid lg:grid-cols-[1.4fr_1fr]'>
+                  <div className='p-6 lg:p-8'>
+                    <div className='mb-4 flex flex-wrap gap-2'>
+                      <StatusBadge value={orders?.order_status} />
+                      <StatusBadge value={orders?.payment_terms} />
+                    </div>
+                    <div className='text-xs font-bold uppercase tracking-[0.22em] text-emerald-700 dark:text-emerald-300'>
+                      Buyer purchase order
+                    </div>
+                    <h1 className='mt-3 text-3xl font-semibold tracking-normal text-slate-950 dark:text-white'>
+                      {orderNumber}
+                    </h1>
+                    <p className='mt-3 max-w-3xl text-base leading-7 text-slate-600 dark:text-slate-300'>
+                      {accountName} placed PO {orders?.po_number || 'without a PO number'} for delivery to {location?.location_name || 'an assigned location'}.
+                    </p>
+
+                    <div className='mt-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-4'>
+                      <DetailMeta label='Account' value={accountName} />
+                      <DetailMeta label='Buyer' value={buyerName} />
+                      <DetailMeta label='Requested' value={formatDate(orders?.requested_delivery_date)} />
+                      <DetailMeta label='Promised' value={formatDate(orders?.promised_delivery_date)} />
+                    </div>
+                  </div>
+
+                  <div className='grid grid-cols-2 gap-3 border-t border-slate-200 bg-slate-50 p-6 dark:border-dark-700 dark:bg-dark-800 lg:border-l lg:border-t-0'>
+                    <InfoCard label='Order total' value={formatMoney(orders?.order_total)} />
+                    <InfoCard label='Line items' value={orderItems.length} />
+                    <InfoCard label='Ordered at' value={formatDate(orders?.ordered_at)} />
+                    <InfoCard label='Shipments' value={shipments.length} />
+                  </div>
                 </div>
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-              
-                <div className={'mb-4'}>
-                    <p className={'block font-bold mb-2'}>Account</p>
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                        <p>{orders?.account?.account_name ?? 'No data'}</p>
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                </div>
-                 
-              
-
-              
-
-              
-
-              
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-              
-                <div className={'mb-4'}>
-                    <p className={'block font-bold mb-2'}>Location</p>
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                        <p>{orders?.location?.location_name ?? 'No data'}</p>
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                </div>
-                 
-              
-
-              
-
-              
-
-              
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-              
-                <div className={'mb-4'}>
-                    <p className={'block font-bold mb-2'}>Buyer</p>
-                    
-                    
-                        <p>{orders?.buyer?.firstName ?? 'No data'}</p>
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                </div>
-                 
-              
-
-              
-
-              
-
-              
-              
-
-              
-                <div className={'mb-4'}>
-                    <p className={'block font-bold mb-2'}>POnumber</p>
-                    <p>{orders?.po_number}</p>
-                </div>
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-                <FormField label='Orderedat'>
-                    {orders.ordered_at ? <DatePicker
-                      dateFormat="yyyy-MM-dd hh:mm"
-                      showTimeSelect
-                      selected={orders.ordered_at ?
-                        new Date(
-                          dayjs(orders.ordered_at).format('YYYY-MM-DD hh:mm'),
-                        ) : null
-                      }
-                      disabled
-                    /> : <p>No Orderedat</p>}
-                </FormField>
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-                <FormField label='Requesteddeliverydate'>
-                    {orders.requested_delivery_date ? <DatePicker
-                      dateFormat="yyyy-MM-dd hh:mm"
-                      showTimeSelect
-                      selected={orders.requested_delivery_date ?
-                        new Date(
-                          dayjs(orders.requested_delivery_date).format('YYYY-MM-DD hh:mm'),
-                        ) : null
-                      }
-                      disabled
-                    /> : <p>No Requesteddeliverydate</p>}
-                </FormField>
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-                <FormField label='Promiseddeliverydate'>
-                    {orders.promised_delivery_date ? <DatePicker
-                      dateFormat="yyyy-MM-dd hh:mm"
-                      showTimeSelect
-                      selected={orders.promised_delivery_date ?
-                        new Date(
-                          dayjs(orders.promised_delivery_date).format('YYYY-MM-DD hh:mm'),
-                        ) : null
-                      }
-                      disabled
-                    /> : <p>No Promiseddeliverydate</p>}
-                </FormField>
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-                <div className={'mb-4'}>
-                    <p className={'block font-bold mb-2'}>Orderstatus</p>
-                    <p>{orders?.order_status ?? 'No data'}</p>
-                </div>
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-                <div className={'mb-4'}>
-                    <p className={'block font-bold mb-2'}>Paymentterms</p>
-                    <p>{orders?.payment_terms ?? 'No data'}</p>
-                </div>
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-              
-
-              
-
-              
-
-              
-
-              
-                <div className={'mb-4'}>
-                  <p className={'block font-bold mb-2'}>Subtotal</p>
-                  <p>{orders?.subtotal || 'No data'}</p>
-                </div>
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-              
-
-              
-
-              
-
-              
-
-              
-                <div className={'mb-4'}>
-                  <p className={'block font-bold mb-2'}>Taxtotal</p>
-                  <p>{orders?.tax_total || 'No data'}</p>
-                </div>
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-              
-
-              
-
-              
-
-              
-
-              
-                <div className={'mb-4'}>
-                  <p className={'block font-bold mb-2'}>Shippingtotal</p>
-                  <p>{orders?.shipping_total || 'No data'}</p>
-                </div>
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-              
-
-              
-
-              
-
-              
-
-              
-                <div className={'mb-4'}>
-                  <p className={'block font-bold mb-2'}>Ordertotal</p>
-                  <p>{orders?.order_total || 'No data'}</p>
-                </div>
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-              
-
-              
-
-              
-                <FormField label='Multi Text' hasTextareaHeight>
-                  <textarea className={'w-full'} disabled value={orders?.buyer_notes} />
-                </FormField>
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-              
-
-              
-
-              
-                <FormField label='Multi Text' hasTextareaHeight>
-                  <textarea className={'w-full'} disabled value={orders?.internal_notes} />
-                </FormField>
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-              
-
-                
-                
-                
-                
-                
-                
-                
-                
-                
-                
-                
-                
-                
-                
-                
-                
-                <>
-                    <p className={'block font-bold mb-2'}>Order_items Order</p>
-                    <CardBox
-                      className='mb-6 border border-gray-300 rounded overflow-hidden'
-                      hasTable
-                    >
-                        <div className='overflow-x-auto'>
-                            <table>
-                            <thead>
-                            <tr>
-                                
-                                
-                                
-                                
-                                
-                                
-                                <th>Quantity(cases)</th>
-                                
-                                
-                                
-                                <th>Caseprice</th>
-                                
-                                
-                                
-                                <th>Linetotal</th>
-                                
-                                
-                                
-                                <th>Fulfillmentstatus</th>
-                                
-                                
-                                
-                                <th>Linenotes</th>
-                                
-                                
-                            </tr>
-                            </thead>
-                            <tbody>
-                            {orders.order_items_order && Array.isArray(orders.order_items_order) &&
-                              orders.order_items_order.map((item: any) => (
-                                <tr key={item.id} onClick={() => router.push(`/order_items/order_items-view/?id=${item.id}`)}>
-                                    
-                                    
-                                    
-                                    
-                                    
-                                    
-                                    <td data-label="quantity_cases">
-                                        { item.quantity_cases }
-                                    </td>
-                                    
-                                    
-                                    
-                                    <td data-label="case_price">
-                                        { item.case_price }
-                                    </td>
-                                    
-                                    
-                                    
-                                    <td data-label="line_total">
-                                        { item.line_total }
-                                    </td>
-                                    
-                                    
-                                    
-                                    <td data-label="fulfillment_status">
-                                        { item.fulfillment_status }
-                                    </td>
-                                    
-                                    
-                                    
-                                    <td data-label="line_notes">
-                                        { item.line_notes }
-                                    </td>
-                                    
-                                    
-                                </tr>
-                              ))}
-                            </tbody>
-                        </table>
+              </div>
+
+              <SectionPanel title='Fulfillment status' subtitle='Operational progress from buyer submission to delivery confirmation.'>
+                <div className='grid gap-3 md:grid-cols-5'>
+                  {orderSteps.map((step, index) => {
+                    const isComplete = statusIndex >= index;
+                    const isCurrent = statusIndex === index;
+
+                    return (
+                      <div
+                        key={step}
+                        className={`rounded-xl border p-4 ${
+                          isComplete
+                            ? 'border-emerald-200 bg-emerald-50 dark:border-emerald-800 dark:bg-emerald-950'
+                            : 'border-slate-200 bg-slate-50 dark:border-dark-700 dark:bg-dark-800'
+                        }`}
+                      >
+                        <div className={`mb-3 flex h-8 w-8 items-center justify-center rounded-full text-sm font-bold ${
+                          isComplete
+                            ? 'bg-emerald-600 text-white'
+                            : 'bg-white text-slate-500 dark:bg-dark-900 dark:text-slate-300'
+                        }`}>
+                          {index + 1}
                         </div>
-                        {!orders?.order_items_order?.length && <div className={'text-center py-4'}>No data</div>}
-                    </CardBox>
-                </>
-                
-                
-                <>
-                    <p className={'block font-bold mb-2'}>Shipments Order</p>
-                    <CardBox
-                      className='mb-6 border border-gray-300 rounded overflow-hidden'
-                      hasTable
-                    >
-                        <div className='overflow-x-auto'>
-                            <table>
-                            <thead>
-                            <tr>
-                                
-                                
-                                
-                                
-                                <th>Shipmentnumber</th>
-                                
-                                
-                                
-                                <th>Carrier</th>
-                                
-                                
-                                
-                                <th>Trackingnumber</th>
-                                
-                                
-                                
-                                <th>Shippedat</th>
-                                
-                                
-                                
-                                <th>Deliveredat</th>
-                                
-                                
-                                
-                                <th>Shipmentstatus</th>
-                                
-                                
-                                
-                                
-                            </tr>
-                            </thead>
-                            <tbody>
-                            {orders.shipments_order && Array.isArray(orders.shipments_order) &&
-                              orders.shipments_order.map((item: any) => (
-                                <tr key={item.id} onClick={() => router.push(`/shipments/shipments-view/?id=${item.id}`)}>
-                                    
-                                    
-                                    
-                                    
-                                    <td data-label="shipment_number">
-                                        { item.shipment_number }
-                                    </td>
-                                    
-                                    
-                                    
-                                    <td data-label="carrier">
-                                        { item.carrier }
-                                    </td>
-                                    
-                                    
-                                    
-                                    <td data-label="tracking_number">
-                                        { item.tracking_number }
-                                    </td>
-                                    
-                                    
-                                    
-                                    <td data-label="shipped_at">
-                                        { dataFormatter.dateTimeFormatter(item.shipped_at) }
-                                    </td>
-                                    
-                                    
-                                    
-                                    <td data-label="delivered_at">
-                                        { dataFormatter.dateTimeFormatter(item.delivered_at) }
-                                    </td>
-                                    
-                                    
-                                    
-                                    <td data-label="shipment_status">
-                                        { item.shipment_status }
-                                    </td>
-                                    
-                                    
-                                    
-                                    
-                                </tr>
-                              ))}
-                            </tbody>
-                        </table>
+                        <div className='font-semibold capitalize text-slate-950 dark:text-white'>{readableValue(step)}</div>
+                        <div className='mt-1 text-xs text-slate-500 dark:text-slate-400'>
+                          {isCurrent ? 'Current step' : isComplete ? 'Completed' : 'Pending'}
                         </div>
-                        {!orders?.shipments_order?.length && <div className={'text-center py-4'}>No data</div>}
-                    </CardBox>
-                </>
-                
-                
-                
-                
-                
-                
-                
+                      </div>
+                    );
+                  })}
+                </div>
+              </SectionPanel>
 
-                <BaseDivider />
+              <div className='grid gap-6 xl:grid-cols-[1fr_1fr]'>
+                <SectionPanel title='Delivery handoff' subtitle='Ship-to location and receiving instructions.'>
+                  <div className='rounded-xl border border-slate-200 bg-slate-50 p-4 dark:border-dark-700 dark:bg-dark-800'>
+                    <div className='flex items-start justify-between gap-4'>
+                      <div>
+                        <div className='text-base font-semibold text-slate-950 dark:text-white'>{location?.location_name || 'No location'}</div>
+                        <div className='mt-1 text-sm capitalize text-slate-500 dark:text-slate-400'>{readableValue(location?.location_type)}</div>
+                      </div>
+                      {location?.is_active && <StatusBadge value='active' />}
+                    </div>
+                    <div className='mt-4 text-sm leading-6 text-slate-600 dark:text-slate-300'>
+                      {deliveryAddress.length > 0 ? deliveryAddress.map((line) => <div key={line}>{line}</div>) : 'No address on file.'}
+                    </div>
+                    <div className='mt-4 rounded-lg bg-white p-3 text-sm text-slate-600 dark:bg-dark-900 dark:text-slate-300'>
+                      {location?.delivery_instructions || 'No delivery instructions yet.'}
+                    </div>
+                  </div>
+                </SectionPanel>
 
+                <SectionPanel title='Order notes' subtitle='Buyer comments and internal fulfillment context.'>
+                  <div className='grid gap-4 sm:grid-cols-2'>
+                    <div className='rounded-xl border border-slate-200 bg-slate-50 p-4 dark:border-dark-700 dark:bg-dark-800'>
+                      <div className='mb-2 text-xs font-bold uppercase tracking-[0.16em] text-slate-500 dark:text-slate-400'>Buyer notes</div>
+                      <div className='text-sm leading-6 text-slate-700 dark:text-slate-200'>{orders?.buyer_notes || 'No buyer notes.'}</div>
+                    </div>
+                    <div className='rounded-xl border border-slate-200 bg-slate-50 p-4 dark:border-dark-700 dark:bg-dark-800'>
+                      <div className='mb-2 text-xs font-bold uppercase tracking-[0.16em] text-slate-500 dark:text-slate-400'>Internal notes</div>
+                      <div className='text-sm leading-6 text-slate-700 dark:text-slate-200'>{orders?.internal_notes || 'No internal notes.'}</div>
+                    </div>
+                  </div>
+                </SectionPanel>
+              </div>
+
+              <SectionPanel title='Order lines' subtitle='Case quantities, contract prices, fulfillment status, and kitchen-facing notes.'>
+                {orderItems.length > 0 ? (
+                  <div className='grid gap-4 lg:grid-cols-2'>
+                    {orderItems.map((item: any) => (
+                      <button
+                        key={item.id}
+                        type='button'
+                        className='rounded-xl border border-slate-200 bg-slate-50 p-4 text-left transition hover:border-emerald-200 hover:bg-emerald-50 dark:border-dark-700 dark:bg-dark-800 dark:hover:border-emerald-800 dark:hover:bg-emerald-950'
+                        onClick={() => router.push(`/order_items/order_items-view/?id=${item.id}`)}
+                      >
+                        <div className='flex items-start justify-between gap-4'>
+                          <div>
+                            <div className='font-semibold text-slate-950 dark:text-white'>{productLabel(item)}</div>
+                            <div className='mt-1 max-w-full break-all text-xs text-slate-500 dark:text-slate-400'>{item.product?.sku || item.productId}</div>
+                          </div>
+                          <StatusBadge value={item.fulfillment_status} />
+                        </div>
+
+                        <div className='mt-4 grid grid-cols-3 gap-3 text-sm'>
+                          <div className='rounded-lg border border-slate-200 bg-white p-3 dark:border-dark-700 dark:bg-dark-900'>
+                            <div className='text-xs font-bold uppercase tracking-[0.14em] text-slate-500 dark:text-slate-400'>Cases</div>
+                            <div className='mt-1 font-semibold text-slate-950 dark:text-white'>{item.quantity_cases}</div>
+                          </div>
+                          <div className='rounded-lg border border-slate-200 bg-white p-3 dark:border-dark-700 dark:bg-dark-900'>
+                            <div className='text-xs font-bold uppercase tracking-[0.14em] text-slate-500 dark:text-slate-400'>Case</div>
+                            <div className='mt-1 font-semibold text-slate-950 dark:text-white'>{formatMoney(item.case_price)}</div>
+                          </div>
+                          <div className='rounded-lg border border-slate-200 bg-white p-3 dark:border-dark-700 dark:bg-dark-900'>
+                            <div className='text-xs font-bold uppercase tracking-[0.14em] text-slate-500 dark:text-slate-400'>Total</div>
+                            <div className='mt-1 font-semibold text-slate-950 dark:text-white'>{formatMoney(item.line_total)}</div>
+                          </div>
+                        </div>
+
+                        <div className='mt-4 rounded-lg bg-white p-3 text-sm text-slate-600 dark:bg-dark-900 dark:text-slate-300'>
+                          {item.line_notes || 'No line notes'}
+                        </div>
+                      </button>
+                    ))}
+                  </div>
+                ) : (
+                  <EmptyState label='No order lines yet.' />
+                )}
+              </SectionPanel>
+
+              <div className='grid gap-6 xl:grid-cols-[1fr_420px]'>
+                <SectionPanel title='Shipments' subtitle='Carrier tracking and delivery confirmation.'>
+                  {shipments.length > 0 ? (
+                    <div className='grid gap-4 lg:grid-cols-2'>
+                      {shipments.map((item: any) => (
+                        <button
+                          key={item.id}
+                          type='button'
+                          onClick={() => router.push(`/shipments/shipments-view/?id=${item.id}`)}
+                          className='rounded-xl border border-slate-200 bg-slate-50 p-4 text-left transition hover:border-emerald-200 hover:bg-emerald-50 dark:border-dark-700 dark:bg-dark-800 dark:hover:border-emerald-800 dark:hover:bg-emerald-950'
+                        >
+                          <div className='flex items-start justify-between gap-4'>
+                            <div>
+                              <div className='font-semibold text-slate-950 dark:text-white'>{item.shipment_number}</div>
+                              <div className='mt-1 text-sm text-slate-500 dark:text-slate-400'>{item.carrier || 'No carrier'} · {item.tracking_number || 'No tracking'}</div>
+                            </div>
+                            <StatusBadge value={item.shipment_status} />
+                          </div>
+                          <div className='mt-4 grid gap-2 text-sm text-slate-600 dark:text-slate-300'>
+                            <div>Shipped: {formatDate(item.shipped_at)}</div>
+                            <div>Delivered: {formatDate(item.delivered_at)}</div>
+                          </div>
+                        </button>
+                      ))}
+                    </div>
+                  ) : (
+                    <EmptyState label='No shipments attached yet.' />
+                  )}
+                </SectionPanel>
+
+                <SectionPanel title='Totals' subtitle='Financial summary for this purchase order.'>
+                  <div className='space-y-3 text-sm'>
+                    <TotalRow label='Subtotal' value={formatMoney(orders?.subtotal)} />
+                    <TotalRow label='Tax' value={formatMoney(orders?.tax_total)} />
+                    <TotalRow label='Shipping' value={formatMoney(orders?.shipping_total)} />
+                    <div className='border-t border-slate-200 pt-3 dark:border-dark-700'>
+                      <TotalRow label='Order total' value={formatMoney(orders?.order_total)} strong />
+                    </div>
+                  </div>
+                </SectionPanel>
+              </div>
+
+              <div>
                 <BaseButton
                     color='info'
-                    label='Back'
+                    label='Back to orders'
                     onClick={() => router.push('/orders/orders-list')}
                 />
-              </CardBox>
+              </div>
+            </div>
           </SectionMain>
       </>
     );
 };
 
+const TotalRow = ({ label, value, strong = false }) => (
+  <div className='flex items-center justify-between gap-4'>
+    <div className={strong ? 'text-base font-semibold text-slate-950 dark:text-white' : 'text-slate-600 dark:text-slate-300'}>
+      {label}
+    </div>
+    <div className={strong ? 'text-xl font-semibold text-slate-950 dark:text-white' : 'font-semibold text-slate-950 dark:text-white'}>
+      {value}
+    </div>
+  </div>
+);
+
 OrdersView.getLayout = function getLayout(page: ReactElement) {
     return (
       <LayoutAuthenticated
@@ -962,4 +383,4 @@ OrdersView.getLayout = function getLayout(page: ReactElement) {
     )
 }
 
-export default OrdersView;
\ No newline at end of file
+export default OrdersView;
diff --git a/frontend/src/pages/products/products-list.tsx b/frontend/src/pages/products/products-list.tsx
index 8888815..1fefed0 100644
--- a/frontend/src/pages/products/products-list.tsx
+++ b/frontend/src/pages/products/products-list.tsx
@@ -25,18 +25,18 @@ const ProductsTablesPage = () => {
   const [filterItems, setFilterItems] = useState([]);
   const [csvFile, setCsvFile] = useState<File | null>(null);
   const [isModalActive, setIsModalActive] = useState(false);
-  const [showTableView, setShowTableView] = useState(false);
 
   
   const { currentUser } = useAppSelector((state) => state.auth);
+  const { count } = useAppSelector((state) => state.products);
   
 
   const dispatch = useAppDispatch();
 
 
-  const [filters] = useState([{label: 'SKU', title: 'sku'},{label: 'Productname', title: 'product_name'},{label: 'Brand', title: 'brand'},{label: 'Shortdescription', title: 'short_description'},{label: 'Longdescription', title: 'long_description'},{label: 'Packsize', title: 'pack_size'},{label: 'Unitofmeasure', title: 'uom'},{label: 'Allergens', title: 'allergens'},{label: 'Certifications', title: 'certifications'},
-          {label: 'Unitspercase', title: 'units_per_case', number: 'true'},{label: 'MOQ(cases)', title: 'moq_cases', number: 'true'},
-          {label: 'Unitweight(lbs)', title: 'unit_weight_lbs', number: 'true'},{label: 'Caseweight(lbs)', title: 'case_weight_lbs', number: 'true'},
+  const [filters] = useState([{label: 'SKU', title: 'sku'},{label: 'Product name', title: 'product_name'},{label: 'Brand', title: 'brand'},{label: 'Short description', title: 'short_description'},{label: 'Long description', title: 'long_description'},{label: 'Pack size', title: 'pack_size'},{label: 'Unit of measure', title: 'uom'},{label: 'Allergens', title: 'allergens'},{label: 'Certifications', title: 'certifications'},
+          {label: 'Units per case', title: 'units_per_case', number: 'true'},{label: 'MOQ cases', title: 'moq_cases', number: 'true'},
+          {label: 'Unit weight lbs', title: 'unit_weight_lbs', number: 'true'},{label: 'Case weight lbs', title: 'case_weight_lbs', number: 'true'},
           
     
     
@@ -44,7 +44,7 @@ const ProductsTablesPage = () => {
     
     
           
-          {label: 'Temperaturezone', title: 'temperature_zone', type: 'enum', options: ['ambient','refrigerated','frozen']},{label: 'Productstatus', title: 'product_status', type: 'enum', options: ['active','discontinued','seasonal','out_of_stock']},
+          {label: 'Temperature zone', title: 'temperature_zone', type: 'enum', options: ['ambient','refrigerated','frozen']},{label: 'Product status', title: 'product_status', type: 'enum', options: ['active','discontinued','seasonal','out_of_stock']},{label: 'Sample eligible', title: 'is_sample_eligible', type: 'enum', options: ['true','false']},
   ]);
     
     const hasCreatePermission = currentUser && hasPermission(currentUser, 'CREATE_PRODUCTS');
@@ -64,6 +64,19 @@ const ProductsTablesPage = () => {
         setFilterItems([...filterItems, newItem]);
     };
 
+    const addPresetFilter = (selectedField: string, filterValue: string) => {
+        const newItem = {
+            id: uniqueId(),
+            fields: {
+                filterValue,
+                filterValueFrom: '',
+                filterValueTo: '',
+                selectedField,
+            },
+        };
+        setFilterItems([...filterItems, newItem]);
+    };
+
     const getProductsCSV = async () => {
         const response = await axios({url: '/products?filetype=csv', method: 'GET',responseType: 'blob'});
         const type = response.headers['content-type']
@@ -93,35 +106,99 @@ const ProductsTablesPage = () => {
         <title>{getPageTitle('Products')}</title>
       </Head>
       <SectionMain>
-        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Products" main>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Contract catalog" main>
         {''}
         </SectionTitleLineWithButton>
-        <CardBox   className='mb-6' cardBoxClassName='flex flex-wrap'>
+        <div className='mb-6 overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm dark:border-dark-700 dark:bg-dark-900'>
+          <div className='grid gap-0 lg:grid-cols-[1.4fr_1fr]'>
+            <div className='p-6 lg:p-8'>
+              <div className='mb-3 text-xs font-bold uppercase tracking-[0.24em] text-emerald-700 dark:text-emerald-300'>
+                Foodservice supplier catalog
+              </div>
+              <h1 className='mb-4 max-w-3xl text-3xl font-semibold tracking-normal text-slate-950 dark:text-white'>
+                Manage contract SKUs with the operational detail buyers expect.
+              </h1>
+              <p className='max-w-3xl text-base leading-7 text-slate-600 dark:text-slate-300'>
+                Keep pack size, storage zone, allergens, certifications, MOQ, sample readiness, and spec sheets visible before a restaurant buyer places a purchase order.
+              </p>
+              <div className='mt-6 flex flex-wrap gap-2'>
+                <button
+                  type='button'
+                  className='rounded-full border border-emerald-200 bg-emerald-50 px-4 py-2 text-sm font-semibold text-emerald-800 transition hover:border-emerald-300 hover:bg-emerald-100 dark:border-emerald-800 dark:bg-emerald-950 dark:text-emerald-100'
+                  onClick={() => addPresetFilter('product_status', 'active')}
+                >
+                  Active SKUs
+                </button>
+                <button
+                  type='button'
+                  className='rounded-full border border-sky-200 bg-sky-50 px-4 py-2 text-sm font-semibold text-sky-800 transition hover:border-sky-300 hover:bg-sky-100 dark:border-sky-800 dark:bg-sky-950 dark:text-sky-100'
+                  onClick={() => addPresetFilter('temperature_zone', 'refrigerated')}
+                >
+                  Refrigerated
+                </button>
+                <button
+                  type='button'
+                  className='rounded-full border border-cyan-200 bg-cyan-50 px-4 py-2 text-sm font-semibold text-cyan-800 transition hover:border-cyan-300 hover:bg-cyan-100 dark:border-cyan-800 dark:bg-cyan-950 dark:text-cyan-100'
+                  onClick={() => addPresetFilter('temperature_zone', 'frozen')}
+                >
+                  Frozen
+                </button>
+                <button
+                  type='button'
+                  className='rounded-full border border-amber-200 bg-amber-50 px-4 py-2 text-sm font-semibold text-amber-800 transition hover:border-amber-300 hover:bg-amber-100 dark:border-amber-800 dark:bg-amber-950 dark:text-amber-100'
+                  onClick={() => addPresetFilter('is_sample_eligible', 'true')}
+                >
+                  Sample-ready
+                </button>
+              </div>
+            </div>
+            <div className='border-t border-slate-200 bg-slate-50 p-6 dark:border-dark-700 dark:bg-dark-800 lg:border-l lg:border-t-0'>
+              <div className='grid h-full grid-cols-2 gap-3'>
+                <div className='rounded-xl border border-slate-200 bg-white p-4 dark:border-dark-700 dark:bg-dark-900'>
+                  <div className='text-xs font-bold uppercase tracking-[0.18em] text-slate-500 dark:text-slate-400'>Catalog SKUs</div>
+                  <div className='mt-3 text-3xl font-semibold text-slate-950 dark:text-white'>{count || 0}</div>
+                </div>
+                <div className='rounded-xl border border-slate-200 bg-white p-4 dark:border-dark-700 dark:bg-dark-900'>
+                  <div className='text-xs font-bold uppercase tracking-[0.18em] text-slate-500 dark:text-slate-400'>Buyer use</div>
+                  <div className='mt-3 text-lg font-semibold text-slate-950 dark:text-white'>Reorder + PO</div>
+                </div>
+                <div className='rounded-xl border border-slate-200 bg-white p-4 dark:border-dark-700 dark:bg-dark-900'>
+                  <div className='text-xs font-bold uppercase tracking-[0.18em] text-slate-500 dark:text-slate-400'>Controls</div>
+                  <div className='mt-3 text-lg font-semibold text-slate-950 dark:text-white'>Allergens</div>
+                </div>
+                <div className='rounded-xl border border-slate-200 bg-white p-4 dark:border-dark-700 dark:bg-dark-900'>
+                  <div className='text-xs font-bold uppercase tracking-[0.18em] text-slate-500 dark:text-slate-400'>Docs</div>
+                  <div className='mt-3 text-lg font-semibold text-slate-950 dark:text-white'>Spec sheets</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <CardBox className='mb-6' cardBoxClassName='flex flex-wrap items-center gap-3'>
           
-            {hasCreatePermission && <BaseButton className={'mr-3'} href={'/products/products-new'} color='info' label='New Item'/>}
+            {hasCreatePermission && <BaseButton href={'/products/products-new'} color='info' label='Add SKU'/>}
           
           <BaseButton
-              className={'mr-3'}
               color='info'
-              label='Filter'
+              label='Add filter'
               onClick={addFilter}
           />
-          <BaseButton className={'mr-3'} color='info' label='Download CSV' onClick={getProductsCSV} />
+          <BaseButton color='info' label='Export CSV' onClick={getProductsCSV} />
           
             {hasCreatePermission && (
               <BaseButton
                 color='info'
-                label='Upload CSV'
+                label='Import CSV'
                 onClick={() => setIsModalActive(true)}
               />
             )}
           
-          <div className='md:inline-flex items-center ms-auto'>
+          <div className='md:inline-flex items-center md:ml-auto'>
             <div id='delete-rows-button'></div>
           </div>  
           
-            <div className='md:inline-flex items-center ms-auto'>
-              <Link href={'/products/products-table'}>Switch to Table</Link>
+            <div className='md:inline-flex items-center'>
+              <Link className='font-semibold text-slate-700 underline-offset-4 hover:underline dark:text-slate-200' href={'/products/products-table'}>Table view</Link>
             </div>
           
         </CardBox>
diff --git a/frontend/src/pages/products/products-table.tsx b/frontend/src/pages/products/products-table.tsx
index 027bec1..8f3b4db 100644
--- a/frontend/src/pages/products/products-table.tsx
+++ b/frontend/src/pages/products/products-table.tsx
@@ -25,7 +25,6 @@ const ProductsTablesPage = () => {
   const [filterItems, setFilterItems] = useState([]);
   const [csvFile, setCsvFile] = useState<File | null>(null);
   const [isModalActive, setIsModalActive] = useState(false);
-  const [showTableView, setShowTableView] = useState(false);
 
   
   const { currentUser } = useAppSelector((state) => state.auth);
@@ -34,9 +33,9 @@ const ProductsTablesPage = () => {
   const dispatch = useAppDispatch();
 
 
-  const [filters] = useState([{label: 'SKU', title: 'sku'},{label: 'Productname', title: 'product_name'},{label: 'Brand', title: 'brand'},{label: 'Shortdescription', title: 'short_description'},{label: 'Longdescription', title: 'long_description'},{label: 'Packsize', title: 'pack_size'},{label: 'Unitofmeasure', title: 'uom'},{label: 'Allergens', title: 'allergens'},{label: 'Certifications', title: 'certifications'},
-          {label: 'Unitspercase', title: 'units_per_case', number: 'true'},{label: 'MOQ(cases)', title: 'moq_cases', number: 'true'},
-          {label: 'Unitweight(lbs)', title: 'unit_weight_lbs', number: 'true'},{label: 'Caseweight(lbs)', title: 'case_weight_lbs', number: 'true'},
+  const [filters] = useState([{label: 'SKU', title: 'sku'},{label: 'Product name', title: 'product_name'},{label: 'Brand', title: 'brand'},{label: 'Short description', title: 'short_description'},{label: 'Long description', title: 'long_description'},{label: 'Pack size', title: 'pack_size'},{label: 'Unit of measure', title: 'uom'},{label: 'Allergens', title: 'allergens'},{label: 'Certifications', title: 'certifications'},
+          {label: 'Units per case', title: 'units_per_case', number: 'true'},{label: 'MOQ cases', title: 'moq_cases', number: 'true'},
+          {label: 'Unit weight lbs', title: 'unit_weight_lbs', number: 'true'},{label: 'Case weight lbs', title: 'case_weight_lbs', number: 'true'},
           
     
     
@@ -44,7 +43,7 @@ const ProductsTablesPage = () => {
     
     
               
-          {label: 'Temperaturezone', title: 'temperature_zone', type: 'enum', options: ['ambient','refrigerated','frozen']},{label: 'Productstatus', title: 'product_status', type: 'enum', options: ['active','discontinued','seasonal','out_of_stock']},
+          {label: 'Temperature zone', title: 'temperature_zone', type: 'enum', options: ['ambient','refrigerated','frozen']},{label: 'Product status', title: 'product_status', type: 'enum', options: ['active','discontinued','seasonal','out_of_stock']},{label: 'Sample eligible', title: 'is_sample_eligible', type: 'enum', options: ['true','false']},
   ]);
     
     const hasCreatePermission = currentUser && hasPermission(currentUser, 'CREATE_PRODUCTS');
@@ -93,34 +92,33 @@ const ProductsTablesPage = () => {
         <title>{getPageTitle('Products')}</title>
       </Head>
       <SectionMain>
-        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Products" main>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Catalog table" main>
         {''}
         </SectionTitleLineWithButton>
-        <CardBox className='mb-6' cardBoxClassName='flex flex-wrap'>
+        <CardBox className='mb-6' cardBoxClassName='flex flex-wrap items-center gap-3'>
           
-            {hasCreatePermission && <BaseButton className={'mr-3'} href={'/products/products-new'} color='info' label='New Item'/>}
+            {hasCreatePermission && <BaseButton href={'/products/products-new'} color='info' label='Add SKU'/>}
           
           <BaseButton
-              className={'mr-3'}
               color='info'
-              label='Filter'
+              label='Add filter'
               onClick={addFilter}
           />
-          <BaseButton className={'mr-3'} color='info' label='Download CSV' onClick={getProductsCSV} />
+          <BaseButton color='info' label='Export CSV' onClick={getProductsCSV} />
           
             {hasCreatePermission && (
               <BaseButton
                 color='info'
-                label='Upload CSV'
+                label='Import CSV'
                 onClick={() => setIsModalActive(true)}
               />
             )}
           
-          <div className='md:inline-flex items-center ms-auto'>
+          <div className='md:inline-flex items-center md:ml-auto'>
             <div id='delete-rows-button'></div>
             
-              <Link href={'/products/products-list'}>
-                Back to <span className='capitalize'>card</span>
+              <Link className='font-semibold text-slate-700 underline-offset-4 hover:underline dark:text-slate-200' href={'/products/products-list'}>
+                Card catalog
               </Link>
             
           </div>
diff --git a/frontend/src/pages/sample_requests/sample_requests-list.tsx b/frontend/src/pages/sample_requests/sample_requests-list.tsx
index ab33fe1..8200fb3 100644
--- a/frontend/src/pages/sample_requests/sample_requests-list.tsx
+++ b/frontend/src/pages/sample_requests/sample_requests-list.tsx
@@ -1,180 +1,481 @@
-import { mdiChartTimelineVariant } from '@mdi/js'
-import Head from 'next/head'
-import { uniqueId } from 'lodash';
-import React, { ReactElement, useState } from 'react'
-import CardBox from '../../components/CardBox'
-import LayoutAuthenticated from '../../layouts/Authenticated'
-import SectionMain from '../../components/SectionMain'
-import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
-import { getPageTitle } from '../../config'
-import TableSample_requests from '../../components/Sample_requests/TableSample_requests'
-import BaseButton from '../../components/BaseButton'
-import axios from "axios";
-import Link from "next/link";
-import {useAppDispatch, useAppSelector} from "../../stores/hooks";
-import CardBoxModal from "../../components/CardBoxModal";
-import DragDropFilePicker from "../../components/DragDropFilePicker";
-import {setRefetch, uploadCsv} from '../../stores/sample_requests/sample_requestsSlice';
+import * as icon from '@mdi/js';
+import Head from 'next/head';
+import Link from 'next/link';
+import React, { ReactElement, useEffect, useMemo, useState } from 'react';
+import axios from 'axios';
 
+import CardBox from '../../components/CardBox';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import LoadingSpinner from '../../components/LoadingSpinner';
+import SectionMain from '../../components/SectionMain';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../../config';
+import { hasPermission } from '../../helpers/userPermissions';
+import { useAppSelector } from '../../stores/hooks';
 
-import {hasPermission} from "../../helpers/userPermissions";
+type UserSummary = {
+  firstName?: string;
+  lastName?: string;
+  email?: string;
+};
 
+type AccountSummary = {
+  account_name?: string;
+  account_type?: string;
+};
 
+type LocationSummary = {
+  location_name?: string;
+  city?: string;
+  state?: string;
+};
 
-const Sample_requestsTablesPage = () => {
-  const [filterItems, setFilterItems] = useState([]);
-  const [csvFile, setCsvFile] = useState<File | null>(null);
-  const [isModalActive, setIsModalActive] = useState(false);
-  const [showTableView, setShowTableView] = useState(false);
+type ProductSummary = {
+  sku?: string;
+  product_name?: string;
+  brand?: string;
+  pack_size?: string;
+  temperature_zone?: string;
+  category?: {
+    category_name?: string;
+  };
+};
 
-  
+type SampleRequest = {
+  id: string;
+  sample_request_number: string;
+  sample_quantity?: number;
+  requested_at?: string;
+  needed_by?: string;
+  sample_status?: string;
+  notes?: string;
+  account?: AccountSummary;
+  location?: LocationSummary;
+  product?: ProductSummary;
+  requested_by?: UserSummary;
+};
+
+const dateFormatter = new Intl.DateTimeFormat('en-US', {
+  month: 'short',
+  day: 'numeric',
+});
+
+const statusOptions = [
+  { label: 'All', value: 'all' },
+  { label: 'Requested', value: 'requested' },
+  { label: 'Approved', value: 'approved' },
+  { label: 'Shipped', value: 'shipped' },
+  { label: 'Delivered', value: 'delivered' },
+];
+
+const sampleFlow = [
+  'Requested by buyer',
+  'Sales review',
+  'Sample shipped',
+  'Chef feedback',
+  'Quote or PO follow-up',
+];
+
+const generatedSeedNames = [
+  'Ada Lovelace',
+  'Alan Turing',
+  'Grace Hopper',
+  'Marie Curie',
+];
+
+const formatDate = (value?: string) => {
+  if (!value) {
+    return 'Not set';
+  }
+
+  return dateFormatter.format(new Date(value));
+};
+
+const formatUserName = (user?: UserSummary) => {
+  if (!user) {
+    return 'Unassigned';
+  }
+
+  const name = [user.firstName, user.lastName].filter(Boolean).join(' ');
+  return name || user.email || 'Unassigned';
+};
+
+const isGeneratedSeedRequest = (item: SampleRequest) => {
+  const searchableText = [
+    item.sample_request_number,
+    item.notes,
+    item.account?.account_name,
+    item.account?.account_type,
+    item.location?.location_name,
+    item.location?.city,
+    item.location?.state,
+    item.product?.sku,
+    item.product?.product_name,
+    item.product?.brand,
+    item.product?.pack_size,
+    item.requested_by?.firstName,
+    item.requested_by?.lastName,
+    item.requested_by?.email,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  return generatedSeedNames.some((name) => searchableText.includes(name));
+};
+
+const humanizeStatus = (status?: string) => {
+  if (!status) {
+    return 'Unassigned';
+  }
+
+  return status
+    .split('_')
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join(' ');
+};
+
+const getStatusClass = (status?: string) => {
+  if (['approved', 'delivered'].includes(status || '')) {
+    return 'border-emerald-200 bg-emerald-50 text-emerald-800';
+  }
+
+  if (status === 'shipped') {
+    return 'border-blue-200 bg-blue-50 text-blue-800';
+  }
+
+  if (status === 'requested') {
+    return 'border-amber-200 bg-amber-50 text-amber-800';
+  }
+
+  if (['declined', 'cancelled'].includes(status || '')) {
+    return 'border-rose-200 bg-rose-50 text-rose-800';
+  }
+
+  return 'border-slate-200 bg-slate-50 text-slate-700';
+};
+
+const StatusPill = ({ status }: { status?: string }) => (
+  <span
+    className={`inline-flex rounded-full border px-2.5 py-1 text-xs font-bold ${getStatusClass(
+      status,
+    )}`}
+  >
+    {humanizeStatus(status)}
+  </span>
+);
+
+const SampleRequestsListPage = () => {
   const { currentUser } = useAppSelector((state) => state.auth);
-  
+  const [sampleRequests, setSampleRequests] = useState<SampleRequest[]>([]);
+  const [selectedStatus, setSelectedStatus] = useState('all');
+  const [isLoading, setIsLoading] = useState(false);
+  const [errorMessage, setErrorMessage] = useState('');
 
-  const dispatch = useAppDispatch();
+  const hasCreatePermission =
+    !!currentUser && hasPermission(currentUser, 'CREATE_SAMPLE_REQUESTS');
 
+  const loadSampleRequests = async () => {
+    setIsLoading(true);
+    setErrorMessage('');
 
-  const [filters] = useState([{label: 'Samplerequestnumber', title: 'sample_request_number'},{label: 'Notes', title: 'notes'},
-          {label: 'Samplequantity', title: 'sample_quantity', number: 'true'},
-          
-          {label: 'Requestedat', title: 'requested_at', date: 'true'},{label: 'Neededby', title: 'needed_by', date: 'true'},
-    
-    
-    {label: 'Account', title: 'account'},
-    
-    
-    
-    {label: 'Location', title: 'location'},
-    
-    
-    
-    {label: 'Requestedby', title: 'requested_by'},
-    
-    
-    
-    {label: 'Product', title: 'product'},
-    
-    
-          
-          {label: 'Samplestatus', title: 'sample_status', type: 'enum', options: ['requested','approved','shipped','delivered','declined','cancelled']},
-  ]);
-    
-    const hasCreatePermission = currentUser && hasPermission(currentUser, 'CREATE_SAMPLE_REQUESTS');
-    
+    try {
+      const { data } = await axios.get('/sample_requests', {
+        params: { page: 0, limit: 30 },
+      });
+      const businessRows = (data.rows || []).filter(
+        (item: SampleRequest) => !isGeneratedSeedRequest(item),
+      );
+      setSampleRequests(businessRows);
+    } catch (error) {
+      console.error('Failed to load sample requests', error);
+      setErrorMessage('Unable to load sample requests.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
 
-    const addFilter = () => {
-        const newItem = {
-            id: uniqueId(),
-            fields: {
-                filterValue: '',
-                filterValueFrom: '',
-                filterValueTo: '',
-                selectedField: '',
-            },
-        };
-        newItem.fields.selectedField = filters[0].title;
-        setFilterItems([...filterItems, newItem]);
-    };
+  useEffect(() => {
+    if (!currentUser) {
+      return;
+    }
 
-    const getSample_requestsCSV = async () => {
-        const response = await axios({url: '/sample_requests?filetype=csv', method: 'GET',responseType: 'blob'});
-        const type = response.headers['content-type']
-        const blob = new Blob([response.data], { type: type })
-        const link = document.createElement('a')
-        link.href = window.URL.createObjectURL(blob)
-        link.download = 'sample_requestsCSV.csv'
-        link.click()
-    };
+    void loadSampleRequests();
+  }, [currentUser?.id]);
 
-    const onModalConfirm = async () => {
-        if (!csvFile) return;
-        await dispatch(uploadCsv(csvFile));
-        dispatch(setRefetch(true));
-        setCsvFile(null);
-        setIsModalActive(false);
-    };
+  const filteredRequests = useMemo(() => {
+    if (selectedStatus === 'all') {
+      return sampleRequests;
+    }
 
-    const onModalCancel = () => {
-        setCsvFile(null);
-        setIsModalActive(false);
-    };
+    return sampleRequests.filter(
+      (item) => item.sample_status === selectedStatus,
+    );
+  }, [sampleRequests, selectedStatus]);
+
+  const requestedCount = sampleRequests.filter(
+    (item) => item.sample_status === 'requested',
+  ).length;
+  const approvedCount = sampleRequests.filter(
+    (item) => item.sample_status === 'approved',
+  ).length;
+  const deliveredCount = sampleRequests.filter(
+    (item) => item.sample_status === 'delivered',
+  ).length;
+  const activeCount = sampleRequests.filter(
+    (item) => !['delivered', 'declined', 'cancelled'].includes(item.sample_status || ''),
+  ).length;
 
   return (
     <>
       <Head>
-        <title>{getPageTitle('Sample_requests')}</title>
+        <title>{getPageTitle('Sample requests')}</title>
       </Head>
       <SectionMain>
-        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Sample_requests" main>
-        {''}
-        </SectionTitleLineWithButton>
-        <CardBox   className='mb-6' cardBoxClassName='flex flex-wrap'>
-          
-            {hasCreatePermission && <BaseButton className={'mr-3'} href={'/sample_requests/sample_requests-new'} color='info' label='New Item'/>}
-          
-          <BaseButton
-              className={'mr-3'}
-              color='info'
-              label='Filter'
-              onClick={addFilter}
-          />
-          <BaseButton className={'mr-3'} color='info' label='Download CSV' onClick={getSample_requestsCSV} />
-          
+        <SectionTitleLineWithButton
+          icon={icon.mdiPackageVariant}
+          title='Sample requests'
+          main
+        >
+          <div className='flex flex-wrap gap-2'>
             {hasCreatePermission && (
-              <BaseButton
-                color='info'
-                label='Upload CSV'
-                onClick={() => setIsModalActive(true)}
-              />
+              <Link
+                href='/sample_requests/sample_requests-new'
+                className='inline-flex h-10 items-center rounded-xl bg-slate-950 px-4 text-sm font-semibold text-white hover:bg-slate-800'
+              >
+                New sample
+              </Link>
             )}
-          
-          <div className='md:inline-flex items-center ms-auto'>
-            <div id='delete-rows-button'></div>
-          </div>  
-          
-            <div className='md:inline-flex items-center ms-auto'>
-              <Link href={'/sample_requests/sample_requests-table'}>Switch to Table</Link>
+            <Link
+              href='/sample_requests/sample_requests-table'
+              className='inline-flex h-10 items-center rounded-xl border border-slate-200 bg-white px-4 text-sm font-semibold text-slate-700 hover:bg-slate-50'
+            >
+              Table view
+            </Link>
+          </div>
+        </SectionTitleLineWithButton>
+
+        <CardBox className='mb-6 border border-slate-200 bg-white shadow-sm'>
+          <div className='grid gap-6 lg:grid-cols-[minmax(0,1fr)_360px]'>
+            <div>
+              <p className='text-xs font-semibold uppercase tracking-[0.22em] text-amber-700'>
+                Chef evaluation queue
+              </p>
+              <h1 className='mt-3 text-3xl font-semibold text-slate-950'>
+                Track samples from buyer request to menu decision
+              </h1>
+              <p className='mt-3 max-w-3xl text-sm leading-7 text-slate-600'>
+                Foodservice suppliers use samples to move chefs from curiosity
+                to a quote, LTO, banquet menu, or recurring PO. This queue keeps
+                product, buyer, ship-to, timing, and tasting notes together.
+              </p>
             </div>
-          
+            <div className='grid gap-3 sm:grid-cols-2 lg:grid-cols-1'>
+              <div className='rounded-xl border border-amber-200 bg-amber-50 p-4'>
+                <p className='text-xs font-semibold uppercase tracking-[0.16em] text-amber-700'>
+                  Active samples
+                </p>
+                <p className='mt-2 text-2xl font-semibold text-slate-950'>
+                  {activeCount}
+                </p>
+              </div>
+              <div className='rounded-xl border border-emerald-200 bg-emerald-50 p-4'>
+                <p className='text-xs font-semibold uppercase tracking-[0.16em] text-emerald-700'>
+                  Ready for follow-up
+                </p>
+                <p className='mt-2 text-2xl font-semibold text-slate-950'>
+                  {approvedCount + deliveredCount}
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <div className='mt-5 grid gap-3 sm:grid-cols-2 lg:grid-cols-4'>
+            <div className='rounded-xl bg-slate-50 p-4'>
+              <p className='text-xs font-semibold uppercase tracking-[0.16em] text-slate-400'>
+                Total requests
+              </p>
+              <p className='mt-2 text-2xl font-semibold text-slate-950'>
+                {sampleRequests.length}
+              </p>
+            </div>
+            <div className='rounded-xl bg-amber-50 p-4'>
+              <p className='text-xs font-semibold uppercase tracking-[0.16em] text-amber-700'>
+                Requested
+              </p>
+              <p className='mt-2 text-2xl font-semibold text-slate-950'>
+                {requestedCount}
+              </p>
+            </div>
+            <div className='rounded-xl bg-emerald-50 p-4'>
+              <p className='text-xs font-semibold uppercase tracking-[0.16em] text-emerald-700'>
+                Approved
+              </p>
+              <p className='mt-2 text-2xl font-semibold text-slate-950'>
+                {approvedCount}
+              </p>
+            </div>
+            <div className='rounded-xl bg-blue-50 p-4'>
+              <p className='text-xs font-semibold uppercase tracking-[0.16em] text-blue-700'>
+                Delivered
+              </p>
+              <p className='mt-2 text-2xl font-semibold text-slate-950'>
+                {deliveredCount}
+              </p>
+            </div>
+          </div>
         </CardBox>
-        
-          <TableSample_requests
-            filterItems={filterItems}
-            setFilterItems={setFilterItems}
-            filters={filters}
-            showGrid={false}
-          />
-        
+
+        {errorMessage && (
+          <div className='mb-5 rounded-2xl border border-rose-200 bg-rose-50 p-4 text-sm font-semibold text-rose-800'>
+            {errorMessage}
+          </div>
+        )}
+
+        <div className='mb-5 flex flex-wrap gap-2'>
+          {statusOptions.map((option) => (
+            <button
+              key={option.value}
+              type='button'
+              onClick={() => setSelectedStatus(option.value)}
+              className={`rounded-full border px-4 py-2 text-sm font-semibold transition ${
+                selectedStatus === option.value
+                  ? 'border-emerald-500 bg-emerald-500 text-white'
+                  : 'border-slate-200 bg-white text-slate-700 hover:bg-slate-50'
+              }`}
+            >
+              {option.label}
+            </button>
+          ))}
+        </div>
+
+        <div className='grid items-start gap-6 xl:grid-cols-[minmax(0,1fr)_340px]'>
+          <div className='grid gap-4 lg:grid-cols-2'>
+            {isLoading && (
+              <div className='col-span-full flex h-40 items-center justify-center rounded-2xl border border-slate-200 bg-white'>
+                <LoadingSpinner />
+              </div>
+            )}
+
+            {!isLoading &&
+              filteredRequests.map((item) => (
+                <Link
+                  key={item.id}
+                  href={`/sample_requests/sample_requests-view/?id=${item.id}`}
+                  className='group block h-full overflow-hidden rounded-2xl border border-slate-200 bg-white p-5 shadow-sm transition hover:-translate-y-0.5 hover:border-amber-200 hover:shadow-md'
+                >
+                  <div className='flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between'>
+                    <div className='min-w-0'>
+                      <p className='text-xs font-semibold uppercase tracking-[0.18em] text-amber-700'>
+                        {item.sample_request_number}
+                      </p>
+                      <h2 className='mt-2 truncate text-xl font-semibold text-slate-950'>
+                        {item.product?.product_name || 'Sample product'}
+                      </h2>
+                      <p className='mt-1 text-sm text-slate-500'>
+                        {item.product?.sku || 'No SKU'} -{' '}
+                        {item.product?.pack_size || 'Pack pending'}
+                      </p>
+                    </div>
+                    <StatusPill status={item.sample_status} />
+                  </div>
+
+                  <div className='mt-5 grid gap-3 rounded-xl bg-slate-50 p-4 text-sm text-slate-600 sm:grid-cols-2'>
+                    <div>
+                      <p className='text-xs uppercase tracking-[0.14em] text-slate-400'>
+                        Buyer account
+                      </p>
+                      <p className='mt-1 font-semibold text-slate-950'>
+                        {item.account?.account_name || 'Unassigned'}
+                      </p>
+                    </div>
+                    <div>
+                      <p className='text-xs uppercase tracking-[0.14em] text-slate-400'>
+                        Needed by
+                      </p>
+                      <p className='mt-1 font-semibold text-slate-950'>
+                        {formatDate(item.needed_by)}
+                      </p>
+                    </div>
+                    <div>
+                      <p className='text-xs uppercase tracking-[0.14em] text-slate-400'>
+                        Ship-to
+                      </p>
+                      <p className='mt-1 font-semibold text-slate-950'>
+                        {item.location?.location_name || 'Not selected'}
+                      </p>
+                    </div>
+                    <div>
+                      <p className='text-xs uppercase tracking-[0.14em] text-slate-400'>
+                        Quantity
+                      </p>
+                      <p className='mt-1 font-semibold text-slate-950'>
+                        {item.sample_quantity || 0} unit(s)
+                      </p>
+                    </div>
+                  </div>
+
+                  <p className='mt-4 line-clamp-2 text-sm leading-6 text-slate-600'>
+                    {item.notes || 'No tasting notes yet.'}
+                  </p>
+
+                  <div className='mt-5 flex flex-col items-start gap-2 border-t border-slate-100 pt-4 text-sm sm:flex-row sm:items-center sm:justify-between sm:gap-3'>
+                    <span className='font-semibold text-slate-500'>
+                      Requested by {formatUserName(item.requested_by)}
+                    </span>
+                    <span className='font-bold text-emerald-700 group-hover:text-emerald-800'>
+                      Review
+                    </span>
+                  </div>
+                </Link>
+              ))}
+
+            {!isLoading && !filteredRequests.length && (
+              <div className='col-span-full rounded-2xl border border-dashed border-slate-300 bg-white p-8 text-center text-sm text-slate-500'>
+                No sample requests match this status.
+              </div>
+            )}
+          </div>
+
+          <aside className='rounded-2xl border border-slate-200 bg-slate-950 p-5 text-white shadow-sm'>
+            <p className='text-xs font-semibold uppercase tracking-[0.22em] text-emerald-300'>
+              Workflow
+            </p>
+            <h3 className='mt-3 text-2xl font-semibold'>
+              Sample-to-order path
+            </h3>
+            <div className='mt-5 space-y-3'>
+              {sampleFlow.map((step, index) => (
+                <div
+                  key={step}
+                  className='flex items-center gap-3 rounded-xl border border-white/10 bg-white/5 p-3'
+                >
+                  <span className='flex h-8 w-8 items-center justify-center rounded-full bg-emerald-400 text-sm font-bold text-slate-950'>
+                    {index + 1}
+                  </span>
+                  <span className='text-sm font-semibold text-slate-100'>
+                    {step}
+                  </span>
+                </div>
+              ))}
+            </div>
+            <div className='mt-5 rounded-xl border border-white/10 bg-white/5 p-4 text-sm leading-6 text-slate-300'>
+              A strong sample workflow gives sales and operations one place to
+              see what was requested, why it matters, and when the buyer needs a
+              decision.
+            </div>
+          </aside>
+        </div>
       </SectionMain>
-      <CardBoxModal
-          title='Upload CSV'
-          buttonColor='info'
-          buttonLabel={'Confirm'}
-        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
-          isActive={isModalActive}
-          onConfirm={onModalConfirm}
-          onCancel={onModalCancel}
-      >
-          <DragDropFilePicker
-              file={csvFile}
-              setFile={setCsvFile}
-              formats={'.csv'}
-          />
-      </CardBoxModal>
     </>
-  )
-}
+  );
+};
 
-Sample_requestsTablesPage.getLayout = function getLayout(page: ReactElement) {
+SampleRequestsListPage.getLayout = function getLayout(page: ReactElement) {
   return (
-      <LayoutAuthenticated
-        
-        permission={'READ_SAMPLE_REQUESTS'}
-        
-      >
-          {page}
-      </LayoutAuthenticated>
-  )
-}
+    <LayoutAuthenticated permission='READ_SAMPLE_REQUESTS'>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
 
-export default Sample_requestsTablesPage
+export default SampleRequestsListPage;
diff --git a/frontend/src/pages/sample_requests/sample_requests-table.tsx b/frontend/src/pages/sample_requests/sample_requests-table.tsx
index 587ce9e..0de403d 100644
--- a/frontend/src/pages/sample_requests/sample_requests-table.tsx
+++ b/frontend/src/pages/sample_requests/sample_requests-table.tsx
@@ -34,10 +34,10 @@ const Sample_requestsTablesPage = () => {
   const dispatch = useAppDispatch();
 
 
-  const [filters] = useState([{label: 'Samplerequestnumber', title: 'sample_request_number'},{label: 'Notes', title: 'notes'},
-          {label: 'Samplequantity', title: 'sample_quantity', number: 'true'},
+  const [filters] = useState([{label: 'Sample request #', title: 'sample_request_number'},{label: 'Tasting notes', title: 'notes'},
+          {label: 'Sample quantity', title: 'sample_quantity', number: 'true'},
           
-          {label: 'Requestedat', title: 'requested_at', date: 'true'},{label: 'Neededby', title: 'needed_by', date: 'true'},
+          {label: 'Requested at', title: 'requested_at', date: 'true'},{label: 'Needed by', title: 'needed_by', date: 'true'},
     
     
     {label: 'Account', title: 'account'},
@@ -48,7 +48,7 @@ const Sample_requestsTablesPage = () => {
     
     
     
-    {label: 'Requestedby', title: 'requested_by'},
+    {label: 'Requested by', title: 'requested_by'},
     
     
     
@@ -56,7 +56,7 @@ const Sample_requestsTablesPage = () => {
     
     
               
-          {label: 'Samplestatus', title: 'sample_status', type: 'enum', options: ['requested','approved','shipped','delivered','declined','cancelled']},
+          {label: 'Sample status', title: 'sample_status', type: 'enum', options: ['requested','approved','shipped','delivered','declined','cancelled']},
   ]);
     
     const hasCreatePermission = currentUser && hasPermission(currentUser, 'CREATE_SAMPLE_REQUESTS');
@@ -102,28 +102,28 @@ const Sample_requestsTablesPage = () => {
   return (
     <>
       <Head>
-        <title>{getPageTitle('Sample_requests')}</title>
+        <title>{getPageTitle('Sample request table')}</title>
       </Head>
       <SectionMain>
-        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Sample_requests" main>
+        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Sample request table" main>
         {''}
         </SectionTitleLineWithButton>
         <CardBox className='mb-6' cardBoxClassName='flex flex-wrap'>
           
-            {hasCreatePermission && <BaseButton className={'mr-3'} href={'/sample_requests/sample_requests-new'} color='info' label='New Item'/>}
+            {hasCreatePermission && <BaseButton className={'mr-3'} href={'/sample_requests/sample_requests-new'} color='info' label='New sample'/>}
           
           <BaseButton
               className={'mr-3'}
               color='info'
-              label='Filter'
+              label='Add filter'
               onClick={addFilter}
           />
-          <BaseButton className={'mr-3'} color='info' label='Download CSV' onClick={getSample_requestsCSV} />
+          <BaseButton className={'mr-3'} color='info' label='Export CSV' onClick={getSample_requestsCSV} />
           
             {hasCreatePermission && (
               <BaseButton
                 color='info'
-                label='Upload CSV'
+                label='Import CSV'
                 onClick={() => setIsModalActive(true)}
               />
             )}
@@ -132,7 +132,7 @@ const Sample_requestsTablesPage = () => {
             <div id='delete-rows-button'></div>
             
               <Link href={'/sample_requests/sample_requests-list'}>
-                Back to <span className='capitalize'>kanban</span>
+                Back to workflow
               </Link>
             
           </div>
diff --git a/frontend/src/pages/sample_requests/sample_requests-view.tsx b/frontend/src/pages/sample_requests/sample_requests-view.tsx
index 60067a3..52c73b0 100644
--- a/frontend/src/pages/sample_requests/sample_requests-view.tsx
+++ b/frontend/src/pages/sample_requests/sample_requests-view.tsx
@@ -1,634 +1,429 @@
-import React, { ReactElement, useEffect } from 'react';
-import Head from 'next/head'
-import DatePicker from "react-datepicker";
-import "react-datepicker/dist/react-datepicker.css";
-import dayjs from "dayjs";
-import {useAppDispatch, useAppSelector} from "../../stores/hooks";
-import {useRouter} from "next/router";
-import { fetch } from '../../stores/sample_requests/sample_requestsSlice'
-import {saveFile} from "../../helpers/fileSaver";
-import dataFormatter from '../../helpers/dataFormatter';
-import ImageField from "../../components/ImageField";
-import LayoutAuthenticated from "../../layouts/Authenticated";
-import {getPageTitle} from "../../config";
-import SectionTitleLineWithButton from "../../components/SectionTitleLineWithButton";
-import SectionMain from "../../components/SectionMain";
-import CardBox from "../../components/CardBox";
-import BaseButton from "../../components/BaseButton";
-import BaseDivider from "../../components/BaseDivider";
-import {mdiChartTimelineVariant} from "@mdi/js";
-import {SwitchField} from "../../components/SwitchField";
-import FormField from "../../components/FormField";
-
-
-const Sample_requestsView = () => {
-    const router = useRouter()
-    const dispatch = useAppDispatch()
-    const { sample_requests } = useAppSelector((state) => state.sample_requests)
-    
-
-    const { id } = router.query;
-    
-    function removeLastCharacter(str) {
-      console.log(str,`str`)
-      return str.slice(0, -1);
-    }
-
-    useEffect(() => {
-        dispatch(fetch({ id }));
-    }, [dispatch, id]);
-
-
-    return (
-      <>
-          <Head>
-              <title>{getPageTitle('View sample_requests')}</title>
-          </Head>
-          <SectionMain>
-            <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title={removeLastCharacter('View sample_requests')} main>
-                <BaseButton
-                  color='info'
-                  label='Edit'
-                  href={`/sample_requests/sample_requests-edit/?id=${id}`}
-                />
-            </SectionTitleLineWithButton>
-            <CardBox>
-            
-
-              
-                <div className={'mb-4'}>
-                    <p className={'block font-bold mb-2'}>Samplerequestnumber</p>
-                    <p>{sample_requests?.sample_request_number}</p>
-                </div>
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-              
-                <div className={'mb-4'}>
-                    <p className={'block font-bold mb-2'}>Account</p>
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                        <p>{sample_requests?.account?.account_name ?? 'No data'}</p>
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                </div>
-                 
-              
-
-              
-
-              
-
-              
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-              
-                <div className={'mb-4'}>
-                    <p className={'block font-bold mb-2'}>Location</p>
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                        <p>{sample_requests?.location?.location_name ?? 'No data'}</p>
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                </div>
-                 
-              
-
-              
-
-              
-
-              
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-              
-                <div className={'mb-4'}>
-                    <p className={'block font-bold mb-2'}>Requestedby</p>
-                    
-                    
-                        <p>{sample_requests?.requested_by?.firstName ?? 'No data'}</p>
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                </div>
-                 
-              
-
-              
-
-              
-
-              
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-              
-                <div className={'mb-4'}>
-                    <p className={'block font-bold mb-2'}>Product</p>
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                        <p>{sample_requests?.product?.product_name ?? 'No data'}</p>
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                    
-                </div>
-                 
-              
-
-              
-
-              
-
-              
-              
-
-              
-
-              
-
-              
-
-              
-                <div className={'mb-4'}>
-                  <p className={'block font-bold mb-2'}>Samplequantity</p>
-                  <p>{sample_requests?.sample_quantity || 'No data'}</p>
-                </div>
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-                <FormField label='Requestedat'>
-                    {sample_requests.requested_at ? <DatePicker
-                      dateFormat="yyyy-MM-dd hh:mm"
-                      showTimeSelect
-                      selected={sample_requests.requested_at ?
-                        new Date(
-                          dayjs(sample_requests.requested_at).format('YYYY-MM-DD hh:mm'),
-                        ) : null
-                      }
-                      disabled
-                    /> : <p>No Requestedat</p>}
-                </FormField>
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-                <FormField label='Neededby'>
-                    {sample_requests.needed_by ? <DatePicker
-                      dateFormat="yyyy-MM-dd hh:mm"
-                      showTimeSelect
-                      selected={sample_requests.needed_by ?
-                        new Date(
-                          dayjs(sample_requests.needed_by).format('YYYY-MM-DD hh:mm'),
-                        ) : null
-                      }
-                      disabled
-                    /> : <p>No Neededby</p>}
-                </FormField>
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-                <div className={'mb-4'}>
-                    <p className={'block font-bold mb-2'}>Samplestatus</p>
-                    <p>{sample_requests?.sample_status ?? 'No data'}</p>
-                </div>
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-              
-
-              
-
-              
-                <FormField label='Multi Text' hasTextareaHeight>
-                  <textarea className={'w-full'} disabled value={sample_requests?.notes} />
-                </FormField>
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-
-              
-              
-
-                
-                
-                
-                
-                
-                
-                
-                
-                
-                
-                
-                
-                
-                
-                
-                
-                
-                
-                
-                
-                
-                
-                
-
-                <BaseDivider />
-
-                <BaseButton
-                    color='info'
-                    label='Back'
-                    onClick={() => router.push('/sample_requests/sample_requests-list')}
-                />
-              </CardBox>
-          </SectionMain>
-      </>
-    );
+import * as icon from '@mdi/js';
+import axios from 'axios';
+import Head from 'next/head';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import React, { ReactElement, useEffect, useMemo, useState } from 'react';
+
+import CardBox from '../../components/CardBox';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import LoadingSpinner from '../../components/LoadingSpinner';
+import SectionMain from '../../components/SectionMain';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../../config';
+import { hasPermission } from '../../helpers/userPermissions';
+import { useAppSelector } from '../../stores/hooks';
+
+type UserSummary = {
+  firstName?: string;
+  lastName?: string;
+  email?: string;
 };
 
-Sample_requestsView.getLayout = function getLayout(page: ReactElement) {
-    return (
-      <LayoutAuthenticated
-        
-        permission={'READ_SAMPLE_REQUESTS'}
-        
-      >
-          {page}
-      </LayoutAuthenticated>
-    )
-}
+type AccountSummary = {
+  account_name?: string;
+  account_type?: string;
+};
 
-export default Sample_requestsView;
\ No newline at end of file
+type LocationSummary = {
+  location_name?: string;
+  street?: string;
+  city?: string;
+  state?: string;
+  postal_code?: string;
+};
+
+type ProductSummary = {
+  sku?: string;
+  product_name?: string;
+  brand?: string;
+  pack_size?: string;
+  temperature_zone?: string;
+  category?: {
+    category_name?: string;
+  };
+};
+
+type SampleRequest = {
+  id: string;
+  sample_request_number: string;
+  sample_quantity?: number;
+  requested_at?: string;
+  needed_by?: string;
+  sample_status?: string;
+  notes?: string;
+  account?: AccountSummary;
+  location?: LocationSummary;
+  product?: ProductSummary;
+  requested_by?: UserSummary;
+};
+
+const dateTimeFormatter = new Intl.DateTimeFormat('en-US', {
+  month: 'short',
+  day: 'numeric',
+  hour: 'numeric',
+  minute: '2-digit',
+});
+
+const pipelineSteps = [
+  { status: 'requested', label: 'Buyer requested' },
+  { status: 'approved', label: 'Approved by sales' },
+  { status: 'shipped', label: 'Sample shipped' },
+  { status: 'delivered', label: 'Delivered for tasting' },
+];
+
+const formatDateTime = (value?: string) => {
+  if (!value) {
+    return 'Not set';
+  }
+
+  return dateTimeFormatter.format(new Date(value));
+};
+
+const formatUserName = (user?: UserSummary) => {
+  if (!user) {
+    return 'Unassigned';
+  }
+
+  const name = [user.firstName, user.lastName].filter(Boolean).join(' ');
+  return name || user.email || 'Unassigned';
+};
+
+const humanize = (value?: string) => {
+  if (!value) {
+    return 'Not set';
+  }
+
+  return value
+    .split('_')
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join(' ');
+};
+
+const getStatusClass = (status?: string) => {
+  if (['approved', 'delivered'].includes(status || '')) {
+    return 'border-emerald-200 bg-emerald-50 text-emerald-800';
+  }
+
+  if (status === 'shipped') {
+    return 'border-blue-200 bg-blue-50 text-blue-800';
+  }
+
+  if (status === 'requested') {
+    return 'border-amber-200 bg-amber-50 text-amber-800';
+  }
+
+  if (['declined', 'cancelled'].includes(status || '')) {
+    return 'border-rose-200 bg-rose-50 text-rose-800';
+  }
+
+  return 'border-slate-200 bg-slate-50 text-slate-700';
+};
+
+const FieldBlock = ({
+  label,
+  value,
+}: {
+  label: string;
+  value?: string | number;
+}) => (
+  <div className='rounded-xl bg-slate-50 p-4'>
+    <p className='text-xs font-semibold uppercase tracking-[0.16em] text-slate-400'>
+      {label}
+    </p>
+    <p className='mt-2 text-sm font-semibold text-slate-950'>
+      {value || 'Not set'}
+    </p>
+  </div>
+);
+
+const SampleRequestView = () => {
+  const router = useRouter();
+  const { currentUser } = useAppSelector((state) => state.auth);
+  const { id } = router.query;
+  const [sampleRequest, setSampleRequest] = useState<SampleRequest | null>(
+    null,
+  );
+  const [isLoading, setIsLoading] = useState(false);
+  const [errorMessage, setErrorMessage] = useState('');
+
+  const hasUpdatePermission =
+    !!currentUser && hasPermission(currentUser, 'UPDATE_SAMPLE_REQUESTS');
+
+  useEffect(() => {
+    const loadSampleRequest = async () => {
+      if (typeof id !== 'string') {
+        return;
+      }
+
+      setIsLoading(true);
+      setErrorMessage('');
+
+      try {
+        const { data } = await axios.get(`/sample_requests/${id}`);
+        setSampleRequest(data);
+      } catch (error) {
+        console.error('Failed to load sample request', error);
+        setErrorMessage('Unable to load this sample request.');
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    void loadSampleRequest();
+  }, [id]);
+
+  const statusIndex = useMemo(() => {
+    return pipelineSteps.findIndex(
+      (step) => step.status === sampleRequest?.sample_status,
+    );
+  }, [sampleRequest?.sample_status]);
+
+  const locationAddress = [
+    sampleRequest?.location?.street,
+    sampleRequest?.location?.city,
+    sampleRequest?.location?.state,
+    sampleRequest?.location?.postal_code,
+  ]
+    .filter(Boolean)
+    .join(', ');
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Sample request')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={icon.mdiPackageVariantClosed}
+          title='Sample request'
+          main
+        >
+          <div className='flex flex-wrap gap-2'>
+            <Link
+              href='/sample_requests/sample_requests-list'
+              className='inline-flex h-10 items-center rounded-xl border border-slate-200 bg-white px-4 text-sm font-semibold text-slate-700 hover:bg-slate-50'
+            >
+              Back to queue
+            </Link>
+            {hasUpdatePermission && typeof id === 'string' && (
+              <Link
+                href={`/sample_requests/sample_requests-edit/?id=${id}`}
+                className='inline-flex h-10 items-center rounded-xl bg-slate-950 px-4 text-sm font-semibold text-white hover:bg-slate-800'
+              >
+                Edit request
+              </Link>
+            )}
+          </div>
+        </SectionTitleLineWithButton>
+
+        {errorMessage && (
+          <div className='mb-5 rounded-2xl border border-rose-200 bg-rose-50 p-4 text-sm font-semibold text-rose-800'>
+            {errorMessage}
+          </div>
+        )}
+
+        {isLoading && (
+          <CardBox className='mb-6 flex h-56 items-center justify-center border border-slate-200 bg-white shadow-sm'>
+            <LoadingSpinner />
+          </CardBox>
+        )}
+
+        {!isLoading && sampleRequest && (
+          <>
+            <CardBox className='mb-6 overflow-hidden border border-slate-200 bg-white shadow-sm'>
+              <div className='grid gap-0 lg:grid-cols-[minmax(0,1fr)_340px]'>
+                <div className='p-6'>
+                  <div className='flex flex-wrap items-center gap-3'>
+                    <span className='rounded-full border border-amber-200 bg-amber-50 px-3 py-1 text-xs font-bold uppercase tracking-[0.16em] text-amber-700'>
+                      {sampleRequest.sample_request_number}
+                    </span>
+                    <span
+                      className={`rounded-full border px-3 py-1 text-xs font-bold ${getStatusClass(
+                        sampleRequest.sample_status,
+                      )}`}
+                    >
+                      {humanize(sampleRequest.sample_status)}
+                    </span>
+                  </div>
+
+                  <h1 className='mt-5 text-3xl font-semibold text-slate-950'>
+                    {sampleRequest.product?.product_name || 'Sample product'}
+                  </h1>
+                  <p className='mt-3 max-w-3xl text-sm leading-7 text-slate-600'>
+                    Sample evaluation for{' '}
+                    <span className='font-semibold text-slate-900'>
+                      {sampleRequest.account?.account_name || 'buyer account'}
+                    </span>
+                    . Keep the chef request, sales approval, shipment handoff,
+                    and tasting notes in one place before moving to quote or PO.
+                  </p>
+                </div>
+
+                <div className='border-t border-slate-200 bg-slate-950 p-6 text-white lg:border-l lg:border-t-0'>
+                  <p className='text-xs font-semibold uppercase tracking-[0.18em] text-emerald-300'>
+                    Commercial next step
+                  </p>
+                  <p className='mt-3 text-2xl font-semibold'>
+                    Follow up after tasting
+                  </p>
+                  <p className='mt-3 text-sm leading-6 text-slate-300'>
+                    Convert strong chef feedback into a quote, saved order
+                    guide, or recurring PO while the evaluation is still fresh.
+                  </p>
+                </div>
+              </div>
+            </CardBox>
+
+            <div className='mb-6 grid gap-4 sm:grid-cols-2 xl:grid-cols-4'>
+              <FieldBlock
+                label='Requested at'
+                value={formatDateTime(sampleRequest.requested_at)}
+              />
+              <FieldBlock
+                label='Needed by'
+                value={formatDateTime(sampleRequest.needed_by)}
+              />
+              <FieldBlock
+                label='Sample quantity'
+                value={`${sampleRequest.sample_quantity || 0} unit(s)`}
+              />
+              <FieldBlock
+                label='Temperature'
+                value={humanize(sampleRequest.product?.temperature_zone)}
+              />
+            </div>
+
+            <div className='grid items-start gap-6 xl:grid-cols-[minmax(0,1fr)_360px]'>
+              <div className='space-y-6'>
+                <CardBox className='border border-slate-200 bg-white shadow-sm'>
+                  <div className='flex items-center justify-between gap-4'>
+                    <div>
+                      <p className='text-xs font-semibold uppercase tracking-[0.18em] text-slate-400'>
+                        Pipeline
+                      </p>
+                      <h2 className='mt-2 text-xl font-semibold text-slate-950'>
+                        Sample-to-order progress
+                      </h2>
+                    </div>
+                    <span
+                      className={`rounded-full border px-3 py-1 text-xs font-bold ${getStatusClass(
+                        sampleRequest.sample_status,
+                      )}`}
+                    >
+                      {humanize(sampleRequest.sample_status)}
+                    </span>
+                  </div>
+
+                  <div className='mt-6 grid gap-3 md:grid-cols-4'>
+                    {pipelineSteps.map((step, index) => {
+                      const isActive = statusIndex >= index;
+
+                      return (
+                        <div
+                          key={step.status}
+                          className={`rounded-xl border p-4 ${
+                            isActive
+                              ? 'border-emerald-200 bg-emerald-50'
+                              : 'border-slate-200 bg-slate-50'
+                          }`}
+                        >
+                          <span
+                            className={`flex h-8 w-8 items-center justify-center rounded-full text-sm font-bold ${
+                              isActive
+                                ? 'bg-emerald-500 text-white'
+                                : 'bg-slate-200 text-slate-500'
+                            }`}
+                          >
+                            {index + 1}
+                          </span>
+                          <p className='mt-3 text-sm font-semibold text-slate-950'>
+                            {step.label}
+                          </p>
+                        </div>
+                      );
+                    })}
+                  </div>
+                </CardBox>
+
+                <CardBox className='border border-slate-200 bg-white shadow-sm'>
+                  <p className='text-xs font-semibold uppercase tracking-[0.18em] text-slate-400'>
+                    Tasting brief
+                  </p>
+                  <h2 className='mt-2 text-xl font-semibold text-slate-950'>
+                    Notes from buyer and sales
+                  </h2>
+                  <p className='mt-4 rounded-xl border border-slate-200 bg-slate-50 p-4 text-sm leading-7 text-slate-700'>
+                    {sampleRequest.notes || 'No tasting notes were added yet.'}
+                  </p>
+                </CardBox>
+              </div>
+
+              <aside className='space-y-6'>
+                <CardBox className='border border-slate-200 bg-white shadow-sm'>
+                  <p className='text-xs font-semibold uppercase tracking-[0.18em] text-slate-400'>
+                    Product sample
+                  </p>
+                  <h2 className='mt-2 text-xl font-semibold text-slate-950'>
+                    {sampleRequest.product?.brand || 'Supplier brand'}
+                  </h2>
+                  <div className='mt-5 space-y-3'>
+                    <FieldBlock
+                      label='SKU'
+                      value={sampleRequest.product?.sku}
+                    />
+                    <FieldBlock
+                      label='Pack size'
+                      value={sampleRequest.product?.pack_size}
+                    />
+                    <FieldBlock
+                      label='Category'
+                      value={sampleRequest.product?.category?.category_name}
+                    />
+                  </div>
+                </CardBox>
+
+                <CardBox className='border border-slate-200 bg-white shadow-sm'>
+                  <p className='text-xs font-semibold uppercase tracking-[0.18em] text-slate-400'>
+                    Buyer context
+                  </p>
+                  <h2 className='mt-2 text-xl font-semibold text-slate-950'>
+                    {sampleRequest.account?.account_name || 'Buyer account'}
+                  </h2>
+                  <div className='mt-5 space-y-3'>
+                    <FieldBlock
+                      label='Account type'
+                      value={humanize(sampleRequest.account?.account_type)}
+                    />
+                    <FieldBlock
+                      label='Ship-to location'
+                      value={sampleRequest.location?.location_name}
+                    />
+                    <FieldBlock
+                      label='Address'
+                      value={locationAddress || 'Not set'}
+                    />
+                    <FieldBlock
+                      label='Requested by'
+                      value={formatUserName(sampleRequest.requested_by)}
+                    />
+                  </div>
+                </CardBox>
+              </aside>
+            </div>
+          </>
+        )}
+      </SectionMain>
+    </>
+  );
+};
+
+SampleRequestView.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission='READ_SAMPLE_REQUESTS'>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default SampleRequestView;