fix: positions page contract summary

Author: farabi-deriv

src/screens/ContractDetailsPage/components/ContractSummary.tsx

@@ -11,7 +11,7 @@ export const ContractSummary: React.FC = () => {
 
   const { type, market, stake, profit } = contractDetails;
   return (
-    <div className="h-[104px] p-4 bg-white rounded-lg mb-4 border-b border-gray-300" style={{ boxShadow: '0px 1px 2px 0px rgba(0, 0, 0, 0.06), 0px 1px 2px 0px rgba(0, 0, 0, 0.03)' }}>
+    <div className="h-[104px] w-full p-4 bg-white rounded-lg border-b border-gray-300" style={{ boxShadow: '0px 1px 2px 0px rgba(0, 0, 0, 0.06), 0px 1px 2px 0px rgba(0, 0, 0, 0.03)' }}>
       <div className="flex justify-between">
         <div>
           <div className=" mb-1">

src/screens/PositionsPage/PositionsPage.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
-import { Card, CardContent } from "../../components/ui/card";
 import { useNavigate } from "react-router-dom";
+import { ContractSummary } from "../ContractDetailsPage/components";
 
 const positions = [
   {
@@ -21,17 +21,27 @@ const positions = [
     duration: "00:05:00",
     isOpen: false,
   },
+  {
+    id: 3,
+    type: "Rise",
+    market: "Volatility 100 (1s) Index",
+    stake: "10.00 USD",
+    profit: "+0.00 USD",
+    duration: "00:05:00",
+    isOpen: false,
+  },
 ];
 
 const PositionsPage: React.FC = () => {
+  const navigate = useNavigate();
   const [activeTab, setActiveTab] = useState<"open" | "closed">("open");
   const [swipedCard, setSwipedCard] = useState<number | null>(null);
 
   const handleTouchStart = () => {
     setSwipedCard(null);
   };
 
-  const handleTouchMove = (e: React.TouchEvent, id: number) => {
+  const handleTouchMove = (e: React.TouchEvent<HTMLDivElement>, id: number) => {
     const touch = e.touches[0];
     if (touch.clientX < 250) {
       setSwipedCard(id);
@@ -56,13 +66,13 @@ const PositionsPage: React.FC = () => {
   }, [swipedCard]);
 
   return (
-    <div className="flex flex-col flex-1 h-full bg-white"> 
+    <div className="flex flex-col flex-1 h-full bg-white">
       {/* Tabs */}
       <div className="flex sticky top-0 z-10 px-4 bg-white border-b border-border">
         <button
           className={`flex-1 py-3 border-b-2 transition-colors ${
-            activeTab === "open" 
-              ? "border-primary text-primary" 
+            activeTab === "open"
+              ? "border-primary text-primary"
               : "border-transparent text-muted-foreground"
           }`}
           onClick={() => setActiveTab("open")}
@@ -71,8 +81,8 @@ const PositionsPage: React.FC = () => {
         </button>
         <button
           className={`flex-1 py-3 border-b-2 transition-colors ${
-            activeTab === "closed" 
-              ? "border-primary text-primary" 
+            activeTab === "closed"
+              ? "border-primary text-primary"
               : "border-transparent text-muted-foreground"
           }`}
           onClick={() => setActiveTab("closed")}
@@ -84,51 +94,43 @@ const PositionsPage: React.FC = () => {
       {/* Positions List */}
       <div className="flex-1 overflow-y-auto px-2 pb-4 pt-2 space-y-2 bg-gray-100">
         {positions
-          .filter((position) => (activeTab === "open" ? position.isOpen : !position.isOpen))
-          .map((position) => {
-            const navigate = useNavigate();
-            return (
+          .filter((position) =>
+            activeTab === "open" ? position.isOpen : !position.isOpen
+          )
+          .map((position) => (
+            <div
+              key={position.id}
+              className="relative flex transition-transform duration-300"
+              onTouchStart={handleTouchStart}
+              onTouchMove={(e) => handleTouchMove(e, position.id)}
+              onTouchEnd={handleTouchEnd}
+              onMouseEnter={() => setSwipedCard(position.id)}
+              onMouseLeave={() => setSwipedCard(null)}
+            >
               <div
-                key={position.id}
-                className="relative flex transition-transform duration-300"
-                onTouchStart={handleTouchStart}
-                onTouchMove={(e) => handleTouchMove(e, position.id)}
-                onTouchEnd={handleTouchEnd}
-                onMouseEnter={() => setSwipedCard(position.id)}
-                onMouseLeave={() => setSwipedCard(null)}
+                className={`relative flex transition-transform duration-300 w-full cursor-pointer ${
+                  swipedCard === position.id
+                    ? "translate-x-[-4rem]"
+                    : "translate-x-0"
+                }`}
+                onClick={() => {
+                  navigate(`/contract/${position.id}`);
+                }}
               >
-                <div className={`relative flex transition-transform duration-300 w-full ${swipedCard === position.id ? "-translate-x-0" : "translate-x-0"}`}>
-                  <Card className={`w-full lg:w-full cursor-pointer flex transition-all duration-300 ${
-                    swipedCard === position.id ? "translate-x-[-4rem]" : "translate-x-0"
-                  }`}
-                  onClick={() => navigate(`/contract/${position.id}`)}
-                >
-                  <CardContent className="p-4 w-full">
-                    <div className="flex justify-between">
-                      <div>
-                        <div className="text-red-500 font-bold">{position.type}</div>
-                        <div className="text-gray-500 text-sm">{position.market}</div>
-                      </div>
-                      <div className="text-right">
-                        <div className="text-gray-700">{position.stake}</div>
-                        <div className="text-green-500">{position.profit}</div>
-                      </div>
-                    </div>
-                    <div className="text-gray-500 text-sm mt-2">{position.duration}</div>
-                  </CardContent>
-                </Card>
+                <div className="w-full">
+                  <ContractSummary />
+                </div>
               </div>
-                <button
-                  className={`absolute right-0 h-full w-16 bg-red-600 text-white font-bold flex items-center justify-center transition-all duration-300 rounded-tr-lg rounded-br-lg ${
-                    swipedCard === position.id ? "flex" : "hidden"
-                  }`}
-                  onClick={() => console.log("Close action triggered")}
-                >
-                  Close
-                </button>
-              </div>
-            );
-          })}
+              <button
+                className={`absolute right-0 h-[104px] w-16 bg-red-600 text-xs text-white font-bold flex items-center justify-center transition-all duration-300 rounded-r-lg ${
+                  swipedCard === position.id ? "flex" : "hidden"
+                }`}
+                onClick={() => console.log("Close action triggered")}
+              >
+                Close
+              </button>
+            </div>
+          ))}
       </div>
     </div>
   );