[React] PO detail pgae (#5847)

* Factor out common barcode actions

* Refactoring more icons

* Add PurchaseOrderLineItemTable component

* Improve renderer for SupplierPart

* Edit line item

* Table action column always visible

* Create <AddItemButton> component (refactoring)

* Table updates

- Improve actions column for table
- Move "download" button to right hand side

* Refactoring button components

* More cleanup

- Refactor <TableHoverCard> a bit
- Add placeholder for "receive items"

* Add ProgresBar component

* Make table columns switchable by default

- set switchable: false to disable

* Add project_code column to build table

* Fix row actions column for tables without actions

* Improve rendering for BuildOrderTable

* Cleanup unused imports

* Further fixes

* Remove another unused import

src/frontend/src/components/items/ActionDropdown.tsx

@@ -1,6 +1,13 @@
 import { t } from '@lingui/macro';
 import { ActionIcon, Menu, Tooltip } from '@mantine/core';
-import { IconQrcode } from '@tabler/icons-react';
+import {
+  IconCopy,
+  IconEdit,
+  IconLink,
+  IconQrcode,
+  IconTrash,
+  IconUnlink
+} from '@tabler/icons-react';
 import { ReactNode, useMemo } from 'react';
 
 import { notYetImplemented } from '../../functions/notifications';
@@ -81,3 +88,111 @@ export function BarcodeActionDropdown({
     />
   );
 }
+
+// Common action button for viewing a barcode
+export function ViewBarcodeAction({
+  disabled = false,
+  callback
+}: {
+  disabled?: boolean;
+  callback?: () => void;
+}): ActionDropdownItem {
+  return {
+    icon: <IconQrcode />,
+    name: t`View`,
+    tooltip: t`View barcode`,
+    onClick: callback,
+    disabled: disabled
+  };
+}
+
+// Common action button for linking a custom barcode
+export function LinkBarcodeAction({
+  disabled = false,
+  callback
+}: {
+  disabled?: boolean;
+  callback?: () => void;
+}): ActionDropdownItem {
+  return {
+    icon: <IconLink />,
+    name: t`Link Barcode`,
+    tooltip: t`Link custom barcode`,
+    onClick: callback,
+    disabled: disabled
+  };
+}
+
+// Common action button for un-linking a custom barcode
+export function UnlinkBarcodeAction({
+  disabled = false,
+  callback
+}: {
+  disabled?: boolean;
+  callback?: () => void;
+}): ActionDropdownItem {
+  return {
+    icon: <IconUnlink />,
+    name: t`Unlink Barcode`,
+    tooltip: t`Unlink custom barcode`,
+    onClick: callback,
+    disabled: disabled
+  };
+}
+
+// Common action button for editing an item
+export function EditItemAction({
+  disabled = false,
+  tooltip,
+  callback
+}: {
+  disabled?: boolean;
+  tooltip?: string;
+  callback?: () => void;
+}): ActionDropdownItem {
+  return {
+    icon: <IconEdit color="blue" />,
+    name: t`Edit`,
+    tooltip: tooltip ?? `Edit item`,
+    onClick: callback,
+    disabled: disabled
+  };
+}
+
+// Common action button for deleting an item
+export function DeleteItemAction({
+  disabled = false,
+  tooltip,
+  callback
+}: {
+  disabled?: boolean;
+  tooltip?: string;
+  callback?: () => void;
+}): ActionDropdownItem {
+  return {
+    icon: <IconTrash color="red" />,
+    name: t`Delete`,
+    tooltip: tooltip ?? t`Delete item`,
+    onClick: callback,
+    disabled: disabled
+  };
+}
+
+// Common action button for duplicating an item
+export function DuplicateItemAction({
+  disabled = false,
+  tooltip,
+  callback
+}: {
+  disabled?: boolean;
+  tooltip?: string;
+  callback?: () => void;
+}): ActionDropdownItem {
+  return {
+    icon: <IconCopy color="green" />,
+    name: t`Duplicate`,
+    tooltip: tooltip ?? t`Duplicate item`,
+    onClick: callback,
+    disabled: disabled
+  };
+}