Enhance packaging and department management features

- Updated SQL queries in the packaging controller to include item details and packaging unit information through LEFT JOINs for improved data retrieval.
- Enhanced the packaging page with a new search input for real-time item matching, allowing users to search by item code or name dynamically.
- Refactored department management to use a more consistent state management approach, including renaming state variables for clarity and updating the user modal functionality for better user experience.
- Improved the overall layout and responsiveness of the packaging and department pages, ensuring a more user-friendly interface.

backend-node/src/controllers/packagingController.ts

@@ -173,7 +173,11 @@ export async function getPkgUnitItems(
     const pool = getPool();
 
     const result = await pool.query(
-      `SELECT * FROM pkg_unit_item WHERE pkg_code=$1 AND company_code=$2 ORDER BY created_date DESC`,
+      `SELECT pui.*, ii.item_name, ii.size AS spec, ii.unit
+       FROM pkg_unit_item pui
+       LEFT JOIN item_info ii ON pui.item_number = ii.item_number AND pui.company_code = ii.company_code
+       WHERE pui.pkg_code=$1 AND pui.company_code=$2
+       ORDER BY pui.created_date DESC`,
       [pkgCode, companyCode]
     );
 
@@ -410,7 +414,11 @@ export async function getLoadingUnitPkgs(
     const pool = getPool();
 
     const result = await pool.query(
-      `SELECT * FROM loading_unit_pkg WHERE loading_code=$1 AND company_code=$2 ORDER BY created_date DESC`,
+      `SELECT lup.*, pu.pkg_name, pu.pkg_type
+       FROM loading_unit_pkg lup
+       LEFT JOIN pkg_unit pu ON lup.pkg_code = pu.pkg_code AND lup.company_code = pu.company_code
+       WHERE lup.loading_code=$1 AND lup.company_code=$2
+       ORDER BY lup.created_date DESC`,
       [loadingCode, companyCode]
     );