No hace falta archivo css para historial

src/components/FilterPanel/FilterPanel.jsx

@@ -12,7 +12,7 @@ const optionsData = {
   },
 };
 
-const FilterPanel = ({ currentAmount, totalAmount, onFilter }) => {
+const FilterPanel = ({ currentAmount = 0, totalAmount = 0, onFilter }) => {
   return (
     <>
       <div className="filter-container">

src/components/Products/ProductsList.jsx

@@ -28,40 +28,44 @@ const ProductsList = () => {
     jump(1);
   };
 
-  if (filteredProducts.length) {
-    return (
-      <>
-        <FilterPanel
-          currentAmount={currentAmount()}
-          totalAmount={filteredProducts.length}
-          onFilter={handleFilter}
-        />
-        <div className="cards">
-          {currentData().map((item, key) => {
-            return (
-              <Product
-                item={item}
-                key={key}
-                setProductResponse={setProductResponse}
-              />
-            );
-          })}
-        </div>
-        <div className="container-pagination">
-          <div className="pagination">
-            <ul>
-              <button onClick={() => prev()}>Previous</button>
-              <button onClick={() => next()}>Next</button>
-            </ul>
-          </div>
-        </div>
-      </>
-    );
-  }
   return (
-    <div className="empty">
-      <h1>No hay productos</h1>
-    </div>
+    <>
+      {filteredProducts.length ? (
+        <>
+          <FilterPanel
+            currentAmount={currentAmount()}
+            totalAmount={filteredProducts.length}
+            onFilter={handleFilter}
+          />
+          <div className="cards">
+            {currentData().map((item, key) => {
+              return (
+                <Product
+                  item={item}
+                  key={key}
+                  setProductResponse={setProductResponse}
+                />
+              );
+            })}
+          </div>
+          <div className="container-pagination">
+            <div className="pagination">
+              <ul>
+                <button onClick={() => prev()}>Previous</button>
+                <button onClick={() => next()}>Next</button>
+              </ul>
+            </div>
+          </div>
+        </>
+      ) : (
+        <>
+          <FilterPanel onFilter={handleFilter} />
+          <div className="empty">
+            <h1>No hay productos</h1>
+          </div>
+        </>
+      )}
+    </>
   );
 };
 export default ProductsList;

src/components/ProductsHistory/ProductsHistory.jsx

@@ -28,34 +28,38 @@ const ProductsHistory = () => {
     jump(1);
   };
 
-  if (filteredProducts.length) {
-    return (
-      <>
-        <FilterPanel
-          currentAmount={currentAmount()}
-          totalAmount={filteredProducts.length}
-          onFilter={handleFilter}
-        />
-        <div className="cards">
-          {currentData().map((item, key) => {
-            return <RedeemedProduct item={item} key={key} />;
-          })}
-        </div>
-        <div className="container-pagination">
-          <div className="pagination">
-            <ul>
-              <button onClick={() => prev()}>Previous</button>
-              <button onClick={() => next()}>Next</button>
-            </ul>
-          </div>
-        </div>
-      </>
-    );
-  }
   return (
-    <div className="empty">
-      <h1>No hay productos canjeados</h1>
-    </div>
+    <>
+      {filteredProducts.length ? (
+        <>
+          <FilterPanel
+            currentAmount={currentAmount()}
+            totalAmount={filteredProducts.length}
+            onFilter={handleFilter}
+          />
+          <div className="cards">
+            {currentData().map((item, key) => {
+              return <RedeemedProduct item={item} key={key} />;
+            })}
+          </div>
+          <div className="container-pagination">
+            <div className="pagination">
+              <ul>
+                <button onClick={() => prev()}>Previous</button>
+                <button onClick={() => next()}>Next</button>
+              </ul>
+            </div>
+          </div>
+        </>
+      ) : (
+        <>
+          <FilterPanel onFilter={handleFilter} />
+          <div className="empty">
+            <h1>No hay productos</h1>
+          </div>
+        </>
+      )}
+    </>
   );
 };
 export default ProductsHistory;

src/components/ProductsHistory/RedeemedProduct.jsx

@@ -15,6 +15,7 @@ const Product = ({
       <div className="info">
         <span className="category">{category}</span>
         <h3 className="title">{name}</h3>
+        <span className="category">{cost} coins</span>
       </div>
     </div>
   );