Update quantity column in Inventory part of Product Variant view (#904)

* Add allocated quantity column

* Remove unused prop

* Update snapshots and messages

* Update changelog

CHANGELOG.md

@@ -9,6 +9,7 @@ All notable, unreleased changes to this project will be documented in this file.
 - Add shipping methods to translation section - #864 by @marekchoinski
 - New Miscellaneous and Product refunds - #870 by @orzechdev
 - Add zip code exclusion - #877 by @dominik-zeglen
+- Update quantity column in Inventory part of Product Variant view - #904 by @dominik-zeglen
 
 # 2.11.1
 

locale/defaultMessages.json

@@ -4863,10 +4863,6 @@
     "context": "tabel column header",
     "string": "Warehouse Name"
   },
-  "src_dot_products_dot_components_dot_ProductStocks_dot_2729628316": {
-    "context": "tabel column header",
-    "string": "Quantity Available"
-  },
   "src_dot_products_dot_components_dot_ProductStocks_dot_2796503714": {
     "context": "header",
     "string": "Quantity"
@@ -6696,6 +6692,14 @@
   "src_dot_yes": {
     "string": "Yes"
   },
+  "tableColAllocated": {
+    "context": "table column header, allocated product quantity",
+    "string": "Allocated"
+  },
+  "tableColQuantity": {
+    "context": "table column header",
+    "string": "Quantity"
+  },
   "voucherDetailsUnassignCategory": {
     "context": "unassign category from voucher, button",
     "string": "Unassign"

src/products/components/ProductStocks/ProductStocks.tsx

@@ -33,7 +33,13 @@ import createNonNegativeValueChangeHandler from "@saleor/utils/handlers/nonNegat
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
-export type ProductStockInput = FormsetAtomicData<null, string>;
+export interface ProductStockFormsetData {
+  quantityAllocated: number;
+}
+export type ProductStockInput = FormsetAtomicData<
+  ProductStockFormsetData,
+  string
+>;
 export interface ProductStockFormData {
   sku: string;
   trackInventory: boolean;
@@ -62,7 +68,7 @@ const useStyles = makeStyles(
     colName: {},
     colQuantity: {
       textAlign: "right",
-      width: 200
+      width: 150
     },
     editWarehouses: {
       marginRight: -theme.spacing()
@@ -71,9 +77,6 @@ const useStyles = makeStyles(
       padding: theme.spacing(1.5),
       textAlign: "right"
     },
-    inputComponent: {
-      width: 100
-    },
     menuItem: {
       "&:not(:last-of-type)": {
         marginBottom: theme.spacing(2)
@@ -223,6 +226,11 @@ const ProductStocks: React.FC<ProductStocksProps> = ({
       </CardContent>
       {warehouses?.length > 0 && (
         <Table>
+          <colgroup>
+            <col className={classes.colName} />
+            <col className={classes.colQuantity} />
+            <col className={classes.colQuantity} />
+          </colgroup>
           <TableHead>
             <TableRow>
               <TableCell className={classes.colName}>
@@ -233,8 +241,16 @@ const ProductStocks: React.FC<ProductStocksProps> = ({
               </TableCell>
               <TableCell className={classes.colQuantity}>
                 <FormattedMessage
-                  defaultMessage="Quantity Available"
+                  defaultMessage="Allocated"
-                  description="tabel column header"
+                  description="table column header, allocated product quantity"
+                  id="tableColAllocated"
+                />
+              </TableCell>
+              <TableCell className={classes.colQuantity}>
+                <FormattedMessage
+                  defaultMessage="Quantity"
+                  description="table column header"
+                  id="tableColQuantity"
                 />
               </TableCell>
               <TableCell className={classes.colAction} />
@@ -251,9 +267,11 @@ const ProductStocks: React.FC<ProductStocksProps> = ({
                   <TableCell className={classes.colName}>
                     {stock.label}
                   </TableCell>
+                  <TableCell className={classes.colQuantity}>
+                    {stock.data.quantityAllocated}
+                  </TableCell>
                   <TableCell className={classes.colQuantity}>
                     <TextField
-                      className={classes.inputComponent}
                       disabled={disabled}
                       fullWidth
                       inputProps={{
@@ -278,7 +296,7 @@ const ProductStocks: React.FC<ProductStocksProps> = ({
             })}
             {warehousesToAssign.length > 0 && (
               <TableRow>
-                <TableCell colSpan={2}>
+                <TableCell colSpan={3}>
                   <Typography variant="body2">
                     <FormattedMessage
                       defaultMessage="Assign Warehouse"

src/products/components/ProductUpdatePage/form.tsx

@@ -36,7 +36,7 @@ import { diff } from "fast-array-diff";
 import React from "react";
 
 import { ProductAttributeInput } from "../ProductAttributes";
-import { ProductStockInput } from "../ProductStocks";
+import { ProductStockFormsetData, ProductStockInput } from "../ProductStocks";
 
 export interface ProductUpdateFormData extends MetadataFormData {
   category: string | null;
@@ -127,7 +127,7 @@ export interface ProductUpdateFormProps extends UseProductUpdateFormOpts {
 
 const getStocksData = (
   product: ProductDetails_product,
-  stocks: FormsetData<null, string>
+  stocks: FormsetData<ProductStockFormsetData, string>
 ) => {
   if (product?.productType?.hasVariants) {
     return { addStocks: [], removeStocks: [], updateStocks: [] };

src/products/components/ProductVariantPage/form.tsx

@@ -114,7 +114,11 @@ function useProductVariantUpdateForm(
   const handleStockAdd = (id: string) => {
     triggerChange();
     stocks.add({
-      data: null,
+      data: {
+        quantityAllocated:
+          variant?.stocks?.find(stock => stock.warehouse.id === id)
+            ?.quantityAllocated || 0
+      },
       id,
       label: opts.warehouses.find(warehouse => warehouse.id === id).name,
       value: "0"

src/products/utils/data.ts

@@ -112,7 +112,9 @@ export function getStockInputFromVariant(
 ): ProductStockInput[] {
   return (
     variant?.stocks.map(stock => ({
-      data: null,
+      data: {
+        quantityAllocated: stock.quantityAllocated
+      },
       id: stock.warehouse.id,
       label: stock.warehouse.name,
       value: stock.quantity.toString()
@@ -137,7 +139,9 @@ export function getStockInputFromProduct(
   product: ProductDetails_product
 ): ProductStockInput[] {
   return product?.variants[0]?.stocks.map(stock => ({
-    data: null,
+    data: {
+      quantityAllocated: stock?.quantityAllocated
+    },
     id: stock.warehouse.id,
     label: stock.warehouse.name,
     value: stock.quantity.toString()

src/storybook/__snapshots__/Stories.test.ts.snap

@@ -163594,6 +163594,17 @@ exports[`Storyshots Views / Products / Create product variant add first variant
             <table
               class="MuiTable-root-id"
             >
+              <colgroup>
+                <col
+                  class="ProductStocks-colName-id"
+                />
+                <col
+                  class="ProductStocks-colQuantity-id"
+                />
+                <col
+                  class="ProductStocks-colQuantity-id"
+                />
+              </colgroup>
               <thead
                 class="MuiTableHead-root-id"
               >
@@ -163610,7 +163621,13 @@ exports[`Storyshots Views / Products / Create product variant add first variant
                     class="MuiTableCell-root-id MuiTableCell-head-id ProductStocks-colQuantity-id"
                     scope="col"
                   >
-                    Quantity Available
+                    Allocated
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id ProductStocks-colQuantity-id"
+                    scope="col"
+                  >
+                    Quantity
                   </th>
                   <th
                     class="MuiTableCell-root-id MuiTableCell-head-id ProductStocks-colAction-id"
@@ -163626,7 +163643,7 @@ exports[`Storyshots Views / Products / Create product variant add first variant
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id"
-                    colspan="2"
+                    colspan="3"
                   >
                     <div
                       class="MuiTypography-root-id MuiTypography-body2-id"
@@ -164654,6 +164671,17 @@ exports[`Storyshots Views / Products / Create product variant default 1`] = `
             <table
               class="MuiTable-root-id"
             >
+              <colgroup>
+                <col
+                  class="ProductStocks-colName-id"
+                />
+                <col
+                  class="ProductStocks-colQuantity-id"
+                />
+                <col
+                  class="ProductStocks-colQuantity-id"
+                />
+              </colgroup>
               <thead
                 class="MuiTableHead-root-id"
               >
@@ -164670,7 +164698,13 @@ exports[`Storyshots Views / Products / Create product variant default 1`] = `
                     class="MuiTableCell-root-id MuiTableCell-head-id ProductStocks-colQuantity-id"
                     scope="col"
                   >
-                    Quantity Available
+                    Allocated
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id ProductStocks-colQuantity-id"
+                    scope="col"
+                  >
+                    Quantity
                   </th>
                   <th
                     class="MuiTableCell-root-id MuiTableCell-head-id ProductStocks-colAction-id"
@@ -164686,7 +164720,7 @@ exports[`Storyshots Views / Products / Create product variant default 1`] = `
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id"
-                    colspan="2"
+                    colspan="3"
                   >
                     <div
                       class="MuiTypography-root-id MuiTypography-body2-id"
@@ -166604,6 +166638,17 @@ exports[`Storyshots Views / Products / Create product variant when loading data
             <table
               class="MuiTable-root-id"
             >
+              <colgroup>
+                <col
+                  class="ProductStocks-colName-id"
+                />
+                <col
+                  class="ProductStocks-colQuantity-id"
+                />
+                <col
+                  class="ProductStocks-colQuantity-id"
+                />
+              </colgroup>
               <thead
                 class="MuiTableHead-root-id"
               >
@@ -166620,7 +166665,13 @@ exports[`Storyshots Views / Products / Create product variant when loading data
                     class="MuiTableCell-root-id MuiTableCell-head-id ProductStocks-colQuantity-id"
                     scope="col"
                   >
-                    Quantity Available
+                    Allocated
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id ProductStocks-colQuantity-id"
+                    scope="col"
+                  >
+                    Quantity
                   </th>
                   <th
                     class="MuiTableCell-root-id MuiTableCell-head-id ProductStocks-colAction-id"
@@ -166636,7 +166687,7 @@ exports[`Storyshots Views / Products / Create product variant when loading data
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id"
-                    colspan="2"
+                    colspan="3"
                   >
                     <div
                       class="MuiTypography-root-id MuiTypography-body2-id"
@@ -167682,6 +167733,17 @@ exports[`Storyshots Views / Products / Create product variant with errors 1`] =
             <table
               class="MuiTable-root-id"
             >
+              <colgroup>
+                <col
+                  class="ProductStocks-colName-id"
+                />
+                <col
+                  class="ProductStocks-colQuantity-id"
+                />
+                <col
+                  class="ProductStocks-colQuantity-id"
+                />
+              </colgroup>
               <thead
                 class="MuiTableHead-root-id"
               >
@@ -167698,7 +167760,13 @@ exports[`Storyshots Views / Products / Create product variant with errors 1`] =
                     class="MuiTableCell-root-id MuiTableCell-head-id ProductStocks-colQuantity-id"
                     scope="col"
                   >
-                    Quantity Available
+                    Allocated
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id ProductStocks-colQuantity-id"
+                    scope="col"
+                  >
+                    Quantity
                   </th>
                   <th
                     class="MuiTableCell-root-id MuiTableCell-head-id ProductStocks-colAction-id"
@@ -167714,7 +167782,7 @@ exports[`Storyshots Views / Products / Create product variant with errors 1`] =
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id"
-                    colspan="2"
+                    colspan="3"
                   >
                     <div
                       class="MuiTypography-root-id MuiTypography-body2-id"
@@ -172031,6 +172099,17 @@ exports[`Storyshots Views / Products / Product edit no stock and no variants 1`]
             <table
               class="MuiTable-root-id"
             >
+              <colgroup>
+                <col
+                  class="ProductStocks-colName-id"
+                />
+                <col
+                  class="ProductStocks-colQuantity-id"
+                />
+                <col
+                  class="ProductStocks-colQuantity-id"
+                />
+              </colgroup>
               <thead
                 class="MuiTableHead-root-id"
               >
@@ -172047,7 +172126,13 @@ exports[`Storyshots Views / Products / Product edit no stock and no variants 1`]
                     class="MuiTableCell-root-id MuiTableCell-head-id ProductStocks-colQuantity-id"
                     scope="col"
                   >
-                    Quantity Available
+                    Allocated
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id ProductStocks-colQuantity-id"
+                    scope="col"
+                  >
+                    Quantity
                   </th>
                   <th
                     class="MuiTableCell-root-id MuiTableCell-head-id ProductStocks-colAction-id"
@@ -172063,7 +172148,7 @@ exports[`Storyshots Views / Products / Product edit no stock and no variants 1`]
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id"
-                    colspan="2"
+                    colspan="3"
                   >
                     <div
                       class="MuiTypography-root-id MuiTypography-body2-id"
@@ -175428,6 +175513,17 @@ exports[`Storyshots Views / Products / Product edit no variants 1`] = `
             <table
               class="MuiTable-root-id"
             >
+              <colgroup>
+                <col
+                  class="ProductStocks-colName-id"
+                />
+                <col
+                  class="ProductStocks-colQuantity-id"
+                />
+                <col
+                  class="ProductStocks-colQuantity-id"
+                />
+              </colgroup>
               <thead
                 class="MuiTableHead-root-id"
               >
@@ -175444,7 +175540,13 @@ exports[`Storyshots Views / Products / Product edit no variants 1`] = `
                     class="MuiTableCell-root-id MuiTableCell-head-id ProductStocks-colQuantity-id"
                     scope="col"
                   >
-                    Quantity Available
+                    Allocated
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id ProductStocks-colQuantity-id"
+                    scope="col"
+                  >
+                    Quantity
                   </th>
                   <th
                     class="MuiTableCell-root-id MuiTableCell-head-id ProductStocks-colAction-id"
@@ -175463,11 +175565,16 @@ exports[`Storyshots Views / Products / Product edit no variants 1`] = `
                   >
                     C our wares
                   </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id ProductStocks-colQuantity-id"
+                  >
+                    0
+                  </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id ProductStocks-colQuantity-id"
                   >
                     <div
-                      class="MuiFormControl-root-id MuiTextField-root-id ProductStocks-inputComponent-id MuiFormControl-fullWidth-id"
+                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                     >
                       <div
                         class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
@@ -175530,11 +175637,16 @@ exports[`Storyshots Views / Products / Product edit no variants 1`] = `
                   >
                     Be stocked
                   </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id ProductStocks-colQuantity-id"
+                  >
+                    2
+                  </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id ProductStocks-colQuantity-id"
                   >
                     <div
-                      class="MuiFormControl-root-id MuiTextField-root-id ProductStocks-inputComponent-id MuiFormControl-fullWidth-id"
+                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                     >
                       <div
                         class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
@@ -175594,7 +175706,7 @@ exports[`Storyshots Views / Products / Product edit no variants 1`] = `
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id"
-                    colspan="2"
+                    colspan="3"
                   >
                     <div
                       class="MuiTypography-root-id MuiTypography-body2-id"
@@ -178627,6 +178739,17 @@ exports[`Storyshots Views / Products / Product edit when loading data 1`] = `
             <table
               class="MuiTable-root-id"
             >
+              <colgroup>
+                <col
+                  class="ProductStocks-colName-id"
+                />
+                <col
+                  class="ProductStocks-colQuantity-id"
+                />
+                <col
+                  class="ProductStocks-colQuantity-id"
+                />
+              </colgroup>
               <thead
                 class="MuiTableHead-root-id"
               >
@@ -178643,7 +178766,13 @@ exports[`Storyshots Views / Products / Product edit when loading data 1`] = `
                     class="MuiTableCell-root-id MuiTableCell-head-id ProductStocks-colQuantity-id"
                     scope="col"
                   >
-                    Quantity Available
+                    Allocated
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id ProductStocks-colQuantity-id"
+                    scope="col"
+                  >
+                    Quantity
                   </th>
                   <th
                     class="MuiTableCell-root-id MuiTableCell-head-id ProductStocks-colAction-id"
@@ -178659,7 +178788,7 @@ exports[`Storyshots Views / Products / Product edit when loading data 1`] = `
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id"
-                    colspan="2"
+                    colspan="3"
                   >
                     <div
                       class="MuiTypography-root-id MuiTypography-body2-id"
@@ -181757,6 +181886,17 @@ exports[`Storyshots Views / Products / Product edit when product has no variants
             <table
               class="MuiTable-root-id"
             >
+              <colgroup>
+                <col
+                  class="ProductStocks-colName-id"
+                />
+                <col
+                  class="ProductStocks-colQuantity-id"
+                />
+                <col
+                  class="ProductStocks-colQuantity-id"
+                />
+              </colgroup>
               <thead
                 class="MuiTableHead-root-id"
               >
@@ -181773,7 +181913,13 @@ exports[`Storyshots Views / Products / Product edit when product has no variants
                     class="MuiTableCell-root-id MuiTableCell-head-id ProductStocks-colQuantity-id"
                     scope="col"
                   >
-                    Quantity Available
+                    Allocated
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id ProductStocks-colQuantity-id"
+                    scope="col"
+                  >
+                    Quantity
                   </th>
                   <th
                     class="MuiTableCell-root-id MuiTableCell-head-id ProductStocks-colAction-id"
@@ -181792,11 +181938,16 @@ exports[`Storyshots Views / Products / Product edit when product has no variants
                   >
                     C our wares
                   </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id ProductStocks-colQuantity-id"
+                  >
+                    0
+                  </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id ProductStocks-colQuantity-id"
                   >
                     <div
-                      class="MuiFormControl-root-id MuiTextField-root-id ProductStocks-inputComponent-id MuiFormControl-fullWidth-id"
+                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                     >
                       <div
                         class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
@@ -181859,11 +182010,16 @@ exports[`Storyshots Views / Products / Product edit when product has no variants
                   >
                     Be stocked
                   </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id ProductStocks-colQuantity-id"
+                  >
+                    2
+                  </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id ProductStocks-colQuantity-id"
                   >
                     <div
-                      class="MuiFormControl-root-id MuiTextField-root-id ProductStocks-inputComponent-id MuiFormControl-fullWidth-id"
+                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                     >
                       <div
                         class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
@@ -181923,7 +182079,7 @@ exports[`Storyshots Views / Products / Product edit when product has no variants
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id"
-                    colspan="2"
+                    colspan="3"
                   >
                     <div
                       class="MuiTypography-root-id MuiTypography-body2-id"
@@ -194593,6 +194749,17 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
             <table
               class="MuiTable-root-id"
             >
+              <colgroup>
+                <col
+                  class="ProductStocks-colName-id"
+                />
+                <col
+                  class="ProductStocks-colQuantity-id"
+                />
+                <col
+                  class="ProductStocks-colQuantity-id"
+                />
+              </colgroup>
               <thead
                 class="MuiTableHead-root-id"
               >
@@ -194609,7 +194776,13 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
                     class="MuiTableCell-root-id MuiTableCell-head-id ProductStocks-colQuantity-id"
                     scope="col"
                   >
-                    Quantity Available
+                    Allocated
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id ProductStocks-colQuantity-id"
+                    scope="col"
+                  >
+                    Quantity
                   </th>
                   <th
                     class="MuiTableCell-root-id MuiTableCell-head-id ProductStocks-colAction-id"
@@ -194628,11 +194801,16 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
                   >
                     Warehouse 1
                   </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id ProductStocks-colQuantity-id"
+                  >
+                    1
+                  </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id ProductStocks-colQuantity-id"
                   >
                     <div
-                      class="MuiFormControl-root-id MuiTextField-root-id ProductStocks-inputComponent-id MuiFormControl-fullWidth-id"
+                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                     >
                       <div
                         class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
@@ -194695,11 +194873,16 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
                   >
                     Warehouse 2
                   </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id ProductStocks-colQuantity-id"
+                  >
+                    2
+                  </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id ProductStocks-colQuantity-id"
                   >
                     <div
-                      class="MuiFormControl-root-id MuiTextField-root-id ProductStocks-inputComponent-id MuiFormControl-fullWidth-id"
+                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                     >
                       <div
                         class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
@@ -194759,7 +194942,7 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id"
-                    colspan="2"
+                    colspan="3"
                   >
                     <div
                       class="MuiTypography-root-id MuiTypography-body2-id"
@@ -197570,6 +197753,17 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
             <table
               class="MuiTable-root-id"
             >
+              <colgroup>
+                <col
+                  class="ProductStocks-colName-id"
+                />
+                <col
+                  class="ProductStocks-colQuantity-id"
+                />
+                <col
+                  class="ProductStocks-colQuantity-id"
+                />
+              </colgroup>
               <thead
                 class="MuiTableHead-root-id"
               >
@@ -197586,7 +197780,13 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
                     class="MuiTableCell-root-id MuiTableCell-head-id ProductStocks-colQuantity-id"
                     scope="col"
                   >
-                    Quantity Available
+                    Allocated
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id ProductStocks-colQuantity-id"
+                    scope="col"
+                  >
+                    Quantity
                   </th>
                   <th
                     class="MuiTableCell-root-id MuiTableCell-head-id ProductStocks-colAction-id"
@@ -197605,11 +197805,16 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
                   >
                     Warehouse 1
                   </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id ProductStocks-colQuantity-id"
+                  >
+                    1
+                  </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id ProductStocks-colQuantity-id"
                   >
                     <div
-                      class="MuiFormControl-root-id MuiTextField-root-id ProductStocks-inputComponent-id MuiFormControl-fullWidth-id"
+                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                     >
                       <div
                         class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
@@ -197672,11 +197877,16 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
                   >
                     Warehouse 2
                   </td>
+                  <td
+                    class="MuiTableCell-root-id MuiTableCell-body-id ProductStocks-colQuantity-id"
+                  >
+                    2
+                  </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id ProductStocks-colQuantity-id"
                   >
                     <div
-                      class="MuiFormControl-root-id MuiTextField-root-id ProductStocks-inputComponent-id MuiFormControl-fullWidth-id"
+                      class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                     >
                       <div
                         class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
@@ -197736,7 +197946,7 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id"
-                    colspan="2"
+                    colspan="3"
                   >
                     <div
                       class="MuiTypography-root-id MuiTypography-body2-id"
@@ -198833,6 +199043,17 @@ exports[`Storyshots Views / Products / Product variant details when loading data
             <table
               class="MuiTable-root-id"
             >
+              <colgroup>
+                <col
+                  class="ProductStocks-colName-id"
+                />
+                <col
+                  class="ProductStocks-colQuantity-id"
+                />
+                <col
+                  class="ProductStocks-colQuantity-id"
+                />
+              </colgroup>
               <thead
                 class="MuiTableHead-root-id"
               >
@@ -198849,7 +199070,13 @@ exports[`Storyshots Views / Products / Product variant details when loading data
                     class="MuiTableCell-root-id MuiTableCell-head-id ProductStocks-colQuantity-id"
                     scope="col"
                   >
-                    Quantity Available
+                    Allocated
+                  </th>
+                  <th
+                    class="MuiTableCell-root-id MuiTableCell-head-id ProductStocks-colQuantity-id"
+                    scope="col"
+                  >
+                    Quantity
                   </th>
                   <th
                     class="MuiTableCell-root-id MuiTableCell-head-id ProductStocks-colAction-id"
@@ -198865,7 +199092,7 @@ exports[`Storyshots Views / Products / Product variant details when loading data
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id"
-                    colspan="2"
+                    colspan="3"
                   >
                     <div
                       class="MuiTypography-root-id MuiTypography-body2-id"