Notes

I apologize for the confusion. If the sorting and expand/collapse functionality isn't working as expected, let's modify the code directly in the `PlatformProductScreen` component. Here's how we can update it:

1. First, let's modify the `handleExpandAll` function in the main `Products` component:

```javascript
const handleExpandAll = () => {
const allExpanded = expanded.every((exp) => exp);
setExpanded(expanded.map(() => !allExpanded));
};
```

2. Now, let's update the `PlatformProductScreen` component:

```javascript
import React from 'react';

export const PlatformProductScreen = ({
productData,
selectedProducts,
expanded,
handleExpandAll,
handleToggle,
handleCheckboxChange,
handleSelectAll,
handleSort,
showCount,
t,
handleCancel,
handleProceed,
sortConfigs,
}) => (
<div data-testid="platformProductScreen">
<h1 className="product-selection-title">
{t("reach_product_step1_heading")}
</h1>
<div className="expand-all text-end mb-2">
<button className="btn btn-link reach-it-expnd" onClick={handleExpandAll}>
{expanded.every((exp) => exp)
? t("reach_product_step1_collapseAll")
: t("reach_product_step1_expandAll")}
</button>
</div>

<div className="accordion" id="productAccordion">
{productData.map((section, index) => (
<div className="accordion-item product-card" key={index}>
<hr className="accordion-hr" />
<h2 className="accordion-header reach-it-btnheader">
<button
className={`accordion-button reach-it-accordionbtn ${expanded[index] ? '' : 'collapsed'}`}
type="button"
onClick={() => handleToggle(index)}
aria-expanded={expanded[index]}
>
<div>
{section.parent}{" "}
{showCount(section?.parent) ? (
<span className="badge badge-dark">
{showCount(section?.parent)}
</span>
) : (
""
)}
</div>
<span className="expand-icon ms-2">
{expanded[index] ? <em className="abt-icon abt-icon-minus"></em> : <em className="abt-icon abt-icon-plus"></em>}
</span>
</button>
</h2>
<div
className={`accordion-collapse collapse ${
expanded[index] ? "show" : ""
}`}
aria-labelledby={`accordion${index}`}
>
{/* ... (rest of the accordion body remains the same) ... */}
<div className="accordion-body d-none d-md-block">
<table className="table product-table">
<thead>
<tr>
<th>
<div className='select-all-container'>
<input
type="checkbox"
className="select-all"
data-group={`group${index + 1}`}
onChange={(e) => {
const isChecked = e.target.checked;
handleSelectAll(index, isChecked);
}}
/>
<span>{t("reach_product_step1_table_selectAll")}</span>
</div>
</th>
{["name", "family", "listNo"].map((key) => (
<th
key={key}
onClick={() => handleSort(index, key)}
style={{ cursor: "pointer", fontWeight: "bold" }}
>
{t(`reach_product_step1_table_product${key.charAt(0).toUpperCase() + key.slice(1)}`)}
<span className="sorting-icon-container">
{sortConfigs[index]?.key === key ? (
sortConfigs[index]?.direction === "asc" ? (
<em className="abt-icon abt-icon-arrow-right abt-icon-arrow-down"></em>
) : (
<em className="abt-icon abt-icon-arrow-right abt-icon-arrow-up"></em>
)
) : (
<em className="abt-icon abt-icon-arrow-right abt-icon-arrow-down"></em>
)}
</span>
</th>
))}
</tr>
</thead>
<tbody>
{/* ... (tbody content remains the same) ... */}
</tbody>
</table>
</div>
</div>
</div>
))}
</div>

{/* Add buttons for proceeding and canceling */}
<div className="d-flex justify-content-between mt-4">
<button className="btn btn-secondary" onClick={handleCancel}>
{t("reach_product_step1_cancel")}
</button>
<button className="btn btn-primary" onClick={handleProceed}>
{t("reach_product_step1_proceed")}
</button>
</div>
</div>
);
```

These changes should ensure that:

1. The expand/collapse all button works correctly.
2. Individual accordions can be toggled.
3. Sorting icons update correctly when clicked.
4. The proceed and cancel buttons are available at the bottom of the screen.

Also, make sure that in your main `Products` component, you're passing all the necessary props to `PlatformProductScreen`:

```javascript
{currentStep === 1 && (
<PlatformProductScreen
productData={productData}
selectedProducts={selectedProducts}
expanded={expanded}
handleExpandAll={handleExpandAll}
handleToggle={handleToggle}
handleCheckboxChange={handleCheckboxChange}
handleSelectAll={handleSelectAll}
handleSort={handleSort}
showCount={showCount}
t={t}
handleCancel={handleCancel}
handleProceed={handleProceed}
sortConfigs={sortConfigs}
/>
)}
```

If you're still experiencing issues after these changes, please provide more details about what exactly isn't working (e.g., sorting not updating, expand/collapse not functioning, etc.), and I'll be happy to help further.