diff --git a/backend/src/test/java/org/eclipse/tractusx/puris/backend/stock/controller/StockViewControllerTest.java b/backend/src/test/java/org/eclipse/tractusx/puris/backend/stock/controller/StockViewControllerTest.java
index 57a281b6..7733dcc4 100644
--- a/backend/src/test/java/org/eclipse/tractusx/puris/backend/stock/controller/StockViewControllerTest.java
+++ b/backend/src/test/java/org/eclipse/tractusx/puris/backend/stock/controller/StockViewControllerTest.java
@@ -30,10 +30,7 @@
 import org.eclipse.tractusx.puris.backend.masterdata.logic.service.MaterialService;
 import org.eclipse.tractusx.puris.backend.masterdata.logic.service.PartnerService;
 import org.eclipse.tractusx.puris.backend.stock.logic.dto.FrontendMaterialDto;
-import org.eclipse.tractusx.puris.backend.stock.logic.service.MaterialStockService;
-import org.eclipse.tractusx.puris.backend.stock.logic.service.PartnerProductStockService;
-import org.eclipse.tractusx.puris.backend.stock.logic.service.ProductStockRequestApiService;
-import org.eclipse.tractusx.puris.backend.stock.logic.service.ProductStockService;
+import org.eclipse.tractusx.puris.backend.stock.logic.service.*;
 import org.junit.jupiter.api.Test;
 import org.modelmapper.ModelMapper;
 import org.springframework.beans.factory.annotation.Autowired;
@@ -66,6 +63,9 @@ class StockViewControllerTest {
     @MockBean
     private ProductStockService productStockService;
 
+    @MockBean
+    private ProductItemStockService productItemStockService;
+
     @MockBean
     private MaterialStockService materialStockService;
 
diff --git a/frontend/src/views/StockView.vue b/frontend/src/views/StockView.vue
index 02ef8f43..f75e9ca6 100644
--- a/frontend/src/views/StockView.vue
+++ b/frontend/src/views/StockView.vue
@@ -19,18 +19,18 @@
  SPDX-License-Identifier: Apache-2.0
 -->
 <template>
-    <main class="flex flex-col">
+    <main class="flex flex-col mb-7">
         <h1 class="w-full text-center bold text-5xl mb-6 pb-6">
             View and Manage Stocks
         </h1>
 
-        <div>
+        <div class="divide-y-4">
             <form
                 @submit.prevent="addOrUpdateStock(this.changedStock)"
                 class="flex flex-row"
             >
                 <!-- First Column -->
-                <div class="basis-1/3 mr-28 flex flex-col">
+                <div class="basis-1/2 mr-28 flex flex-col">
                     <div class="flex flex-row justify-start space-x-3">
                         <div class="space-x-2">
                             <input
@@ -73,9 +73,9 @@
                         />
                     </div>
                     <div>
-                        <label for="allocatedToPartner"
-                            >Allocated to Partner</label
-                        >
+                        <label for="allocatedToPartner">
+                            Allocated to Partner
+                        </label>
                         <select
                             class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
                             id="allocatedToPartner"
@@ -126,7 +126,7 @@
                 </div>
 
                 <!-- Second Column -->
-                <div class="basis-1/3 flex flex-col justify-end">
+                <div class="basis-1/2 flex flex-col justify-end">
                     <div>
                         <input
                             type="checkbox"
@@ -138,9 +138,9 @@
                         <label for="isBlocked">Is Blocked </label>
                     </div>
                     <div>
-                        <label for="stockLocationBPNS"
-                            >Stock Location BPNS</label
-                        >
+                        <label for="stockLocationBPNS">
+                            Stock Location BPNS
+                        </label>
                         <select
                             class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
                             id="stockLocationBPNS"
@@ -156,9 +156,9 @@
                         </select>
                     </div>
                     <div>
-                        <label for="stockLocationBPNA"
-                            >Stock Location BPNA</label
-                        >
+                        <label for="stockLocationBPNA">
+                            Stock Location BPNA
+                        </label>
                         <select
                             class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
                             id="stockLocationBPNA"
@@ -176,6 +176,41 @@
                             </option>
                         </select>
                     </div>
+                    <div class="flex flex-row justify-between">
+                        <div class="grow mr-4">
+                            <label for="customerOrderNumber">
+                                Customer Order Number
+                            </label>
+                            <input
+                                class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
+                                id="customerOrderNumber"
+                                v-model="this.changedStock.customerOrderNumber"
+                            />
+                        </div>
+                        <div class="grow">
+                            <label for="customerOrderPositionNumber">
+                                Customer Order Position Number
+                            </label>
+                            <input
+                                class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
+                                id="customerOrderPositionNumber"
+                                v-model="
+                                    this.changedStock
+                                        .customerOrderPositionNumber
+                                "
+                            />
+                        </div>
+                    </div>
+                    <div>
+                        <label for="supplierOrderNumber">
+                            Supplier Order Number
+                        </label>
+                        <input
+                            class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
+                            id="supplierOrderNumber"
+                            v-model="this.changedStock.supplierOrderNumber"
+                        />
+                    </div>
                     <!-- Empty div -->
                     <div style="height: 54.5px"></div>
                 </div>
@@ -184,16 +219,18 @@
             <!-- separator -->
             <div
                 id="materialAndProductStockTables"
-                class="flex flex-col space-y-2 max-w-max"
+                class="flex flex-col space-y-2 max-w-max divide-y-4"
             >
                 <StockTableSFC
                     title="Material Stocks"
                     :stocks="this.bdMaterialStocks"
+                    :ownRole="'customer'"
                     :partnerRole="'supplier'"
                 />
                 <StockTableSFC
                     title="Product Stocks"
                     :stocks="this.bdProductStocks"
+                    :ownRole="'supplier'"
                     :partnerRole="'customer'"
                 />
             </div>
@@ -238,6 +275,9 @@ export default {
                 isBlocked: false,
                 bpns: "",
                 bpna: "",
+                customerOrderNumber: "",
+                customerOrderPositionNumber: "",
+                supplierOrderNumber: "",
             },
             site: {
                 bpns: "BPNS12345678910ZZZ",
diff --git a/frontend/src/views/stock/PartnerStockSFC.vue b/frontend/src/views/stock/PartnerStockSFC.vue
index 33551fc3..7cc53f3f 100644
--- a/frontend/src/views/stock/PartnerStockSFC.vue
+++ b/frontend/src/views/stock/PartnerStockSFC.vue
@@ -19,117 +19,198 @@
  SPDX-License-Identifier: Apache-2.0
 -->
 <template>
-  <div v-if="this.selectedMaterialOrProductId === ''">
-    <h2 class="text-center bold text-3xl">
-      Your {{ this.partnerRole }}s' stocks for no material.
-    </h2>
-  </div>
-  <div v-else class="grid">
-    <h2 class="text-center bold text-3xl">
-      Your {{ this.partnerRole }}s' stocks for
-      {{ this.selectedMaterialOrProductId }}.
-    </h2>
-    <button
-      class="btn-primary place-self-end"
-      @click="updateMaterialOrProduct()"
-    >
-      Update
-    </button>
-    <table class="">
-      <tr class="text-left">
-        <th>Supplier</th>
-        <th>Quantity</th>
-        <th>Is Blocked</th>
-        <th>BPNS</th>
-        <th>BPNA</th>
-        <th>Last updated on</th>
-      </tr>
-      <tr
-          v-for="stock in availableMaterialsOrProducts"
-          :key="stock.supplierPartner.bpnl"
-      >
-        <td v-if="this.selectedMaterialOrProductId == stock.material.materialNumberCustomer">{{ stock.supplierPartner.name }}<br>({{ stock.supplierPartner.bpnl }})</td>
-        <td v-if="this.selectedMaterialOrProductId == stock.material.materialNumberCustomer">{{ stock.quantity }} {{ getUomValueForUomKey(stock.measurementUnit) }}</td>
-        <td v-if="this.selectedMaterialOrProductId == stock.material.materialNumberCustomer">{{ stock.isBlocked }}</td>
-          <td v-if="this.selectedMaterialOrProductId == stock.material.materialNumberCustomer">{{ stock.stockLocationBpns }}</td>
-          <td v-if="this.selectedMaterialOrProductId == stock.material.materialNumberCustomer">{{ stock.stockLocationBpna }}</td>
-          <td v-if="this.selectedMaterialOrProductId == stock.material.materialNumberCustomer">{{ stock.lastUpdatedOn }}</td>
-      </tr>
-    </table>
-  </div>
+    <div class="flex flex-col mt-6">
+        <div class="flex flex-row justify-between items-center">
+            <h3
+                class="bold text-2xl"
+                v-if="this.selectedMaterialOrProductId === ''"
+            >
+                Your {{ this.partnerRole }}s' stocks for no material.
+            </h3>
+            <h3 class="bold text-2xl" v-else>
+                Your {{ this.partnerRole }}s' stocks for
+                {{ this.selectedMaterialOrProductId }}.
+            </h3>
+            <button class="btn-primary" @click="updateMaterialOrProduct()">
+                Update Partner Stocks
+            </button>
+        </div>
+        <p v-if="this.partnerRole === 'supplier'">
+            <i>
+                Info: These are your suppliers' stocks (your potential inputs)
+                at his site that not yet sent to you.
+            </i>
+        </p>
+        <p v-else-if="this.partnerRole === 'customer'">
+            <i>
+                Info: These are your customers' stocks (your recent outputs) at
+                his site that have not yet been used for production.
+            </i>
+        </p>
+        <div class="overflow-x-auto min-h-60 max-h-80">
+            <table class="mt-2 w-full">
+                <thead>
+                    <tr class="text-left">
+                        <th>Supplier</th>
+                        <th>Quantity</th>
+                        <th>Is Blocked</th>
+                        <th>BPNS</th>
+                        <th>BPNA</th>
+                        <th>Last updated on</th>
+                        <th>
+                            Customer Order Number<br />Customer Order Pos.
+                            Number
+                        </th>
+                        <th>Supplier Order Number</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr
+                        v-for="row in tableRows"
+                        :key="row.index"
+                        :class="{ 'empty-row': row.isEmpty }"
+                    >
+                        <template v-if="row.isEmpty">
+                            <td></td>
+                            <td></td>
+                            <td></td>
+                            <td></td>
+                            <td></td>
+                            <td></td>
+                            <td></td>
+                            <td></td>
+                        </template>
+                        <template
+                            v-else
+                            v-for="stock in availableMaterialsOrProducts"
+                            :key="stock.supplierPartner.bpnl"
+                        >
+                            <td>
+                                {{ stock.supplierPartner.name }}<br />({{
+                                    stock.supplierPartner.bpnl
+                                }})
+                            </td>
+                            <td>
+                                {{ stock.quantity }}
+                                {{
+                                    getUomValueForUomKey(stock.measurementUnit)
+                                }}
+                            </td>
+                            <td>{{ stock.isBlocked }}</td>
+                            <td>{{ stock.stockLocationBpns }}</td>
+                            <td>{{ stock.stockLocationBpna }}</td>
+                            <td>{{ stock.lastUpdatedOn }}</td>
+                            <td>
+                                {{ stock.customerOrderNumber }}<br />{{
+                                    stock.customerOrderPositionNumber
+                                }}
+                            </td>
+                            <td>{{ stock.supplierOrderNumber }}</td>
+                        </template>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
 </template>
 
 <script>
 import UnitOfMeasureUtils from "@/services/UnitOfMeasureUtils";
 
 export default {
-  name: "PartnerStockSFC",
+    name: "PartnerStockSFC",
 
-  props: {
-    selectedMaterialOrProductId: { type: String, required: true },
-    partnerRole: { type: String, required: true },
-  },
-  data() {
-    return {
-      backendURL: import.meta.env.VITE_BACKEND_BASE_URL,
-      backendApiKey: import.meta.env.VITE_BACKEND_API_KEY,
-      endpointPartnerProductStocks: import.meta.env.VITE_ENDPOINT_PARTNER_PRODUCT_STOCKS,
-      endpointUpdatePartnerProductStock: import.meta.env.VITE_ENDPOINT_UPDATE_PARTNER_PRODUCT_STOCK,
-      availableMaterialsOrProducts: [],
-    };
-  },
-  created() {
-    if (this.selectedMaterialOrProductId !== "") {
-      if (this.partnerRole === "supplier") {
-        this.getAvailableMaterials();
-      }
+    props: {
+        selectedMaterialOrProductId: { type: String, required: true },
+        partnerRole: { type: String, required: true },
+    },
+    data() {
+        return {
+            backendURL: import.meta.env.VITE_BACKEND_BASE_URL,
+            backendApiKey: import.meta.env.VITE_BACKEND_API_KEY,
+            endpointPartnerProductStocks: import.meta.env
+                .VITE_ENDPOINT_PARTNER_PRODUCT_STOCKS,
+            endpointUpdatePartnerProductStock: import.meta.env
+                .VITE_ENDPOINT_UPDATE_PARTNER_PRODUCT_STOCK,
+            availableMaterialsOrProducts: [],
+        };
+    },
+    computed: {
+        tableRows() {
+            if (this.availableMaterialsOrProducts.length === 0) {
+                // Generate three empty rows
+                return Array.from({ length: 3 }, (_, index) => ({
+                    index,
+                    isEmpty: true,
+                }));
+            } else {
+                // Generate rows with data
+                return this.availableMaterialsOrProducts.map(
+                    (stock, index) => ({
+                        index,
+                        stock,
+                        isEmpty: false,
+                    })
+                );
+            }
+        },
+    },
+    created() {
+        if (this.selectedMaterialOrProductId !== "") {
+            if (this.partnerRole === "supplier") {
+                this.getAvailableMaterials();
+            }
             // else if (this.partnerRole === "customer") {
             //   this.getAvailableProducts();
             // }
-    }
-  },
-  methods: {
-    getAvailableMaterials() {
-      fetch(
-        this.backendURL +
-        this.endpointPartnerProductStocks +
-        this.selectedMaterialOrProductId,
-        {
-          headers: {
-            "X-API-KEY": this.backendApiKey,
-          },
         }
-      )
-        .then((res) => res.json())
-        .then((data) => (this.availableMaterialsOrProducts = data))
-        .catch((err) => console.log(err));
     },
-    // getAvailableProducts() {
-    //   fetch(this.backendURL + this.endpointPartnerProductStocks)
-    //     .then(res => res.json())
-    //     .then(data => this.availableMaterialsOrProducts = data)
-    //     .catch(err => console.log(err));
-    // },
-    updateMaterialOrProduct() {
-      fetch(
-        this.backendURL +
-        this.endpointUpdatePartnerProductStock +
-        this.selectedMaterialOrProductId,
-        {
-          headers: {
-            "X-API-KEY": this.backendApiKey,
-          },
-        }
-      )
-        .then((res) => res.json())
-        .then((data) => console.log(data))
-        .catch((err) => console.log(err));
+    methods: {
+        getAvailableMaterials() {
+            fetch(
+                this.backendURL +
+                    this.endpointPartnerProductStocks +
+                    this.selectedMaterialOrProductId,
+                {
+                    headers: {
+                        "X-API-KEY": this.backendApiKey,
+                    },
+                }
+            )
+                .then((res) => res.json())
+                .then((data) => (this.availableMaterialsOrProducts = data))
+                .catch((err) => console.log(err));
+        },
+        // getAvailableProducts() {
+        //   fetch(this.backendURL + this.endpointPartnerProductStocks)
+        //     .then(res => res.json())
+        //     .then(data => this.availableMaterialsOrProducts = data)
+        //     .catch(err => console.log(err));
+        // },
+        updateMaterialOrProduct() {
+            fetch(
+                this.backendURL +
+                    this.endpointUpdatePartnerProductStock +
+                    this.selectedMaterialOrProductId,
+                {
+                    headers: {
+                        "X-API-KEY": this.backendApiKey,
+                    },
+                }
+            )
+                .then((res) => res.json())
+                .then((data) => console.log(data))
+                .catch((err) => console.log(err));
+        },
+        getUomValueForUomKey(key) {
+            return UnitOfMeasureUtils.findUomValueByKey(key);
+        },
     },
-      getUomValueForUomKey(key){
-          return UnitOfMeasureUtils.findUomValueByKey(key);
-      }
-  },
 };
 </script>
 
-<style scoped></style>
+<style scoped>
+.empty-row {
+    height: 5vh;
+}
+</style>
diff --git a/frontend/src/views/stock/StockTableSFC.vue b/frontend/src/views/stock/StockTableSFC.vue
index 03a4b8d5..6ef6f3eb 100644
--- a/frontend/src/views/stock/StockTableSFC.vue
+++ b/frontend/src/views/stock/StockTableSFC.vue
@@ -19,46 +19,115 @@
  SPDX-License-Identifier: Apache-2.0
 -->
 <template>
-  <div class="flex flex-row">
-    <!--class="grid grid-rows-1 grid-flow-col gap-4"> -->
-    <div class="basis-1/2 pr-5">
-      <h2 class="text-center bold text-3xl">{{ title }}</h2>
-      <table class="">
-        <tr class="text-left">
-          <th>Material (ID)</th>
-          <th>Quantity</th>
-          <th>Allocated to Partner</th>
-          <th>Is Blocked</th>
-          <th>BPNS</th>
-          <th>BPNA</th>
-        </tr>
-        <tr
-            v-for="stock in stocks"
-            :key="stock.uuid"
-            @click="selectStock(stock.material.materialNumberCustomer, stock.uuid)"
-            :class="{ highlight: stock.material.materialNumberCustomer === selectedMaterialId }"
-        >
-          <td>{{ stock.material.name }}<br>({{ stock.material.materialNumberCustomer }})</td>
-          <td>{{ stock.quantity }} {{ getUomValueForUomKey(stock.measurementUnit) }}</td>
-          <td v-if="stock.type == 'PRODUCT'">{{ stock.allocatedToPartner.name }}<br>({{ stock.allocatedToPartner.bpnl }})</td>
-          <td v-if="stock.type == 'MATERIAL'"></td>
-          <td>{{stock.isBlocked}}</td>
-          <td>{{stock.stockLocationBpns}}</td>
-          <td>{{stock.stockLocationBpna}}</td>
-        </tr>
-      </table>
-    </div>
-    <div class="basis-1/2">
-      <PartnerStockSFC
-          :selectedMaterialOrProductId="this.selectedMaterialId"
-          :partnerRole="this.partnerRole"
-          :key="this.selectedMaterialId"
-      />
-      <!--
+    <div class="flex flex-col">
+        <div class="">
+            <h2 class="text-center bold text-3xl">{{ title }}</h2>
+            <h3 class="bold text-2xl">Your Stocks</h3>
+            <p v-if="this.ownRole === 'customer'">
+                <i>
+                    Info: These are your material stocks (your inputs) at your
+                    site.
+                    <b>
+                        Please select one of the material stocks to see the
+                        stocks your supplier still got on stock.
+                    </b>
+                </i>
+            </p>
+            <p v-if="this.ownRole === 'supplier'">
+                <i>
+                    Info: These are your product stocks (your outputs) at your
+                    site.
+                    <b>
+                        Please select one of the product stocks to see the
+                        stocks your customer still got on stock.
+                    </b>
+                </i>
+            </p>
+            <table class="w-full">
+                <thead>
+                    <tr class="text-left">
+                        <th>Material (ID)</th>
+                        <th>Quantity</th>
+                        <th>Allocated to Partner</th>
+                        <th>Is Blocked</th>
+                        <th>BPNS</th>
+                        <th>BPNA</th>
+                        <th>
+                            Customer Order Number<br />
+                            Customer Order Pos. Number
+                        </th>
+                        <th>Supplier Order Number</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <template v-for="row in tableRows" :key="row.index">
+                        <tr
+                            :class="{
+                                'empty-row': row.isEmpty,
+                                highlight:
+                                    !row.isEmpty &&
+                                    row.index === this.selectedRowIndex,
+                            }"
+                            @click="row.isEmpty ? null : selectStock(row.index)"
+                        >
+                            <template v-if="row.isEmpty">
+                                <td></td>
+                                <td></td>
+                                <td></td>
+                                <td></td>
+                                <td></td>
+                                <td></td>
+                                <td></td>
+                                <td></td>
+                            </template>
+                            <template v-else>
+                                <td>
+                                    {{ row.stock.material.name }}<br />({{
+                                        row.stock.material
+                                            .materialNumberCustomer
+                                    }})
+                                </td>
+                                <td>
+                                    {{ row.stock.quantity }}
+                                    {{
+                                        getUomValueForUomKey(
+                                            row.stock.measurementUnit
+                                        )
+                                    }}
+                                </td>
+                                <td v-if="row.stock.type === 'PRODUCT'">
+                                    {{ row.stock.allocatedToPartner.name
+                                    }}<br />({{
+                                        row.stock.allocatedToPartner.bpnl
+                                    }})
+                                </td>
+                                <td v-if="row.stock.type === 'MATERIAL'"></td>
+                                <td>{{ row.stock.isBlocked }}</td>
+                                <td>{{ row.stock.stockLocationBpns }}</td>
+                                <td>{{ row.stock.stockLocationBpna }}</td>
+                                <td>
+                                    {{ row.stock.customerOrderNumber }}<br />{{
+                                        row.stock.customerOrderPositionNumber
+                                    }}
+                                </td>
+                                <td>{{ row.stock.supplierOrderNumber }}</td>
+                            </template>
+                        </tr>
+                    </template>
+                </tbody>
+            </table>
+        </div>
+        <div class="">
+            <PartnerStockSFC
+                :selectedMaterialOrProductId="this.selectedMaterialId"
+                :partnerRole="this.partnerRole"
+                :key="this.selectedMaterialId"
+            />
+            <!--
       <h2 class="text-center bold text-3xl">You're currently seeing your suppliers' stocks for {{this.selectedMaterial.name}} [{{ this.selectedMaterial.id }}]</h2>
       -->
+        </div>
     </div>
-  </div>
 </template>
 
 <script>
@@ -66,42 +135,65 @@ import PartnerStockSFC from "@/views/stock/PartnerStockSFC.vue";
 import UnitOfMeasureUtils from "@/services/UnitOfMeasureUtils";
 
 export default {
-  name: "StockTableSFC",
-  components: {PartnerStockSFC},
+    name: "StockTableSFC",
+    components: { PartnerStockSFC },
 
-  props: {
-    title: {type: String, required: true, default: "Stock"},
-    stocks: {type: Array, required: true},
-    partnerRole: {type: String, required: true, default: ""},
-  },
+    props: {
+        title: { type: String, required: true, default: "Stock" },
+        stocks: { type: Array, required: true },
+        ownRole: { type: String, required: true, default: "customer" },
+        partnerRole: { type: String, required: true, default: "" },
+    },
 
-  data() {
-    return {
-      selectedMaterialId: "",
-      selectedStockUuid: "",
-      materialNumberCustomer : ""
-    };
-  },
-  methods: {
-    selectStock(materialId, stockUuid) {
-      if(this.partnerRole == 'customer')
-        return;
-      this.selectedMaterialId = materialId;
-      this.selectedStockUuid = stockUuid;
+    data() {
+        return {
+            selectedMaterialId: "",
+            selectedRowIndex: "",
+            materialNumberCustomer: "",
+        };
+    },
+    computed: {
+        tableRows() {
+            if (this.stocks.length === 0) {
+                // Generate three empty rows
+                return Array.from({ length: 3 }, (_, index) => ({
+                    index,
+                    isEmpty: true,
+                }));
+            } else {
+                // Generate rows with data
+                return this.stocks.map((stock, index) => ({
+                    index,
+                    stock,
+                    isEmpty: false,
+                }));
+            }
+        },
+    },
+    methods: {
+        selectStock(rowIndex) {
+            if (this.partnerRole === "customer") return;
+            if (this.ownRole === "customer") {
+                this.selectedMaterialId =
+                    this.tableRows[
+                        rowIndex
+                    ].stock.material.materialNumberCustomer;
+            }
+            this.selectedRowIndex = rowIndex;
+        },
+        getUomValueForUomKey(key) {
+            return UnitOfMeasureUtils.findUomValueByKey(key);
+        },
     },
-    getUomValueForUomKey(key){
-        return UnitOfMeasureUtils.findUomValueByKey(key);
-    }
-  },
 };
 </script>
 
 <style scoped>
 .highlight {
-  background-color: orange;
+    background-color: orange;
 }
 
-table {
-  width: 100%;
+.empty-row {
+    height: 5vh;
 }
 </style>