Repository: farrah-deriv/dp2p
Pull request #41: Design update for Profile
Author: login: ernest-deriv
Created: 2025-04-16T13:02:07Z | Merged: 2025-04-17T11:28:40Z



Diff:
diff --git a/app/ads/components/my-ads-table.tsx b/app/ads/components/my-ads-table.tsx
index cc5ea8db69..19aedc5c6f 100644
--- a/app/ads/components/my-ads-table.tsx
+++ b/app/ads/components/my-ads-table.tsx
@@ -6,6 +6,7 @@ import { MoreVertical, Pencil, Copy, Share2, Power, Trash2, Search } from "lucid
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
 import { Button } from "@/components/ui/button"
 import { Badge } from "@/components/ui/badge"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
 import { deleteAd, updateAd } from "../api/api-ads"
 import type { Ad } from "../types"
 import { cn } from "@/lib/utils"
@@ -21,21 +22,16 @@ export default function MyAdsTable({ ads, onAdDeleted }: MyAdsTableProps) {
   const router = useRouter()
   const [isDeleting, setIsDeleting] = useState(false)
   const [isTogglingStatus, setIsTogglingStatus] = useState(false)
-
-  // Add state for error modals
   const [errorModal, setErrorModal] = useState({
     show: false,
     title: "",
     message: "",
   })
-
-  // Add state for delete confirmation modal
   const [deleteConfirmModal, setDeleteConfirmModal] = useState({
     show: false,
     adId: "",
   })
 
-  // Format limits to display as a string
   const formatLimits = (limits: Ad["limits"]) => {
     if (typeof limits === "string") {
       return limits
@@ -43,13 +39,11 @@ export default function MyAdsTable({ ads, onAdDeleted }: MyAdsTableProps) {
     return `${limits.currency} ${limits.min.toFixed(2)} - ${limits.max.toFixed(2)}`
   }
 
-  // Format payment methods to display as a string
   const formatPaymentMethods = (methods: string[]) => {
     if (!methods || methods.length === 0) return "None"
     return methods.join(", ")
   }
 
-  // Updated to use the Badge component with appropriate variants
   const getStatusBadge = (status: string) => {
     switch (status) {
       case "Active":
@@ -62,8 +56,6 @@ export default function MyAdsTable({ ads, onAdDeleted }: MyAdsTableProps) {
   }
 
   const handleEdit = (ad: Ad) => {
-    // Store the ad data in localStorage for the edit flow
-    console.log("Editing ad with description:", ad.description)
     localStorage.setItem(
       "editAdData",
       JSON.stringify({
@@ -76,22 +68,16 @@ export default function MyAdsTable({ ads, onAdDeleted }: MyAdsTableProps) {
 
   const handleCopy = (adId: string) => {
     console.log("Copy ad:", adId)
-    // Add copy functionality
   }
 
   const handleShare = (adId: string) => {
     console.log("Share ad:", adId)
-    // Add share functionality
   }
 
   const handleToggleStatus = async (ad: Ad) => {
     try {
       setIsTogglingStatus(true)
-      console.log(
-        `Toggling status for ad ${ad.id} from ${ad.status} to ${ad.status === "Active" ? "Inactive" : "Active"}`,
-      )
 
-      // Parse the limits if it's a string
       let minAmount = 0
       let maxAmount = 0
       let currency = "USD"
@@ -107,7 +93,6 @@ export default function MyAdsTable({ ads, onAdDeleted }: MyAdsTableProps) {
         currency = ad.limits.currency
       }
 
-      // Extract rate value from string (e.g., "IDR 14500.0000" -> 14500.0000)
       let rateValue = 0
       if (ad.rate && ad.rate.value) {
         const rateMatch = ad.rate.value.match(/([A-Z]+)\s+(\d+(?:\.\d+)?)/)
@@ -116,10 +101,8 @@ export default function MyAdsTable({ ads, onAdDeleted }: MyAdsTableProps) {
         }
       }
 
-      // Set the new isListed value (opposite of current status)
       const isListed = ad.status !== "Active"
 
-      // Update the ad with all current values but change isListed
       const updateResult = await updateAd(ad.id, {
         is_active: isListed,
         minimum_order_amount: minAmount,
@@ -132,7 +115,6 @@ export default function MyAdsTable({ ads, onAdDeleted }: MyAdsTableProps) {
         payment_method_names: ad.type === "Buy" ? ad.paymentMethods : [],
       })
 
-      // Check for errors in the response
       if (updateResult.errors && updateResult.errors.length > 0) {
         const errorMessage =
           updateResult.errors[0].message ||
@@ -140,16 +122,12 @@ export default function MyAdsTable({ ads, onAdDeleted }: MyAdsTableProps) {
         throw new Error(errorMessage)
       }
 
-      console.log(`Ad ${isListed ? "activated" : "deactivated"} successfully:`, updateResult)
-
-      // Call the onAdDeleted callback to refresh the list
       if (onAdDeleted) {
         onAdDeleted()
       }
     } catch (error) {
       console.error("Failed to toggle status:", error)
 
-      // Show error modal instead of alert
       setErrorModal({
         show: true,
         title: `Failed to ${ad.status === "Active" ? "Deactivate" : "Activate"} Ad`,
@@ -164,36 +142,30 @@ export default function MyAdsTable({ ads, onAdDeleted }: MyAdsTableProps) {
   }
 
   const handleDelete = (adId: string) => {
-    // Show confirmation modal instead of immediately deleting
     setDeleteConfirmModal({
       show: true,
       adId: adId,
     })
   }
 
-  // Add a new function to handle the actual deletion after confirmation
   const confirmDelete = async () => {
     try {
       setIsDeleting(true)
       const result = await deleteAd(deleteConfirmModal.adId)
 
-      // Check for errors in the response
       if (result.errors && result.errors.length > 0) {
         const errorMessage = result.errors[0].message || "Failed to delete ad. Please try again."
         throw new Error(errorMessage)
       }
 
-      // Call the onAdDeleted callback to refresh the list and show success message
       if (onAdDeleted) {
         onAdDeleted("deleted")
       }
 
-      // Close the confirmation modal
       setDeleteConfirmModal({ show: false, adId: "" })
     } catch (error) {
       console.error("Failed to delete ad:", error)
 
-      // Show error modal
       setErrorModal({
         show: true,
         title: "Failed to Delete Ad",
@@ -204,12 +176,10 @@ export default function MyAdsTable({ ads, onAdDeleted }: MyAdsTableProps) {
     }
   }
 
-  // Add a function to cancel deletion
   const cancelDelete = () => {
     setDeleteConfirmModal({ show: false, adId: "" })
   }
 
-  // Function to close error modal
   const handleCloseErrorModal = () => {
     setErrorModal({
       show: false,
@@ -228,7 +198,6 @@ export default function MyAdsTable({ ads, onAdDeleted }: MyAdsTableProps) {
         <p className="text-gray-600 mb-6 text-center max-w-md">
           Looking to buy or sell USD? You can post your own ad for others to respond.
         </p>
-        {/* Updated to use Button with cyan variant and pill size */}
         <Button onClick={() => router.push("/ads/create")} variant="cyan" size="pill">
           Create ad
         </Button>
@@ -239,49 +208,57 @@ export default function MyAdsTable({ ads, onAdDeleted }: MyAdsTableProps) {
   return (
     <>
       <div className="w-full">
-        <table className="w-full border-collapse">
-          <thead>
-            <tr className="border-b">
-              <th className="text-left py-4 font-bold text-black text-sm">Ad ID</th>
-              <th className="text-left py-4 font-bold text-black text-sm">Rate (USD 1)</th>
-              <th className="text-left py-4 font-bold text-black text-sm">Limits</th>
-              <th className="text-left py-4 font-bold text-black text-sm">Available amount</th>
-              <th className="text-left py-4 font-bold text-black text-sm">Payment methods</th>
-              <th className="text-left py-4 font-bold text-black text-sm">Status</th>
-              <th className="text-left py-4 font-bold text-black text-sm"></th>
-            </tr>
-          </thead>
-          <tbody>
+        <Table>
+          <TableHeader>
+            <TableRow className="border-b">
+              <TableHead className="text-left py-4 text-slate-600 font-normal text-sm leading-5 tracking-normal">
+                Ad ID
+              </TableHead>
+              <TableHead className="text-left py-4 text-slate-600 font-normal text-sm leading-5 tracking-normal">
+                Rate (USD 1)
+              </TableHead>
+              <TableHead className="text-left py-4 text-slate-600 font-normal text-sm leading-5 tracking-normal">
+                Limits
+              </TableHead>
+              <TableHead className="text-left py-4 text-slate-600 font-normal text-sm leading-5 tracking-normal">
+                Available amount
+              </TableHead>
+              <TableHead className="text-left py-4 text-slate-600 font-normal text-sm leading-5 tracking-normal">
+                Payment methods
+              </TableHead>
+              <TableHead className="text-left py-4 text-slate-600 font-normal text-sm leading-5 tracking-normal">
+                Status
+              </TableHead>
+              <TableHead className="text-left py-4 text-slate-600 font-normal text-sm leading-5 tracking-normal"></TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
             {ads.map((ad, index) => (
-              <tr key={index} className={cn("border-b", ad.status === "Inactive" ? "opacity-60" : "")}>
-                <td className="py-4">
+              <TableRow key={index} className={cn("border-b", ad.status === "Inactive" ? "opacity-60" : "")}>
+                <TableCell className="py-4">
                   <div>
-                    {/* Updated to use StatusIndicator */}
                     <span className={cn("font-medium", ad.type === "Buy" ? "text-buy" : "text-sell")}>{ad.type}</span>
                     <span className="text-gray-900"> {ad.id}</span>
                   </div>
-                </td>
-                <td className="py-4">
+                </TableCell>
+                <TableCell className="py-4">
                   <div className="font-medium">{ad.rate.value}</div>
-                </td>
-                <td className="py-4">{formatLimits(ad.limits)}</td>
-                <td className="py-4">
+                </TableCell>
+                <TableCell className="py-4">{formatLimits(ad.limits)}</TableCell>
+                <TableCell className="py-4">
                   <div className="mb-1">
                     {ad.available.currency} {(ad.available.current || 0).toFixed(2)} /{" "}
                     {(ad.available.total || 0).toFixed(2)}
                   </div>
                   <div className="h-2 bg-gray-200 rounded-full w-full max-w-[180px] overflow-hidden">
                     <div
-                      className="h-full bg-black rounded-full"
-                      style={{
-                        width: `${ad.available.total > 0 ? Math.min(((ad.available.current || 0) / ad.available.total) * 100, 100) : 0}%`,
-                      }}
+                      className={`h-full bg-black rounded-full w-[${ad.available.total > 0 ? Math.min(((ad.available.current || 0) / ad.available.total) * 100, 100) : 0}%]`}
                     ></div>
                   </div>
-                </td>
-                <td className="py-4">{formatPaymentMethods(ad.paymentMethods)}</td>
-                <td className="py-4">{getStatusBadge(ad.status)}</td>
-                <td className="py-4 text-right">
+                </TableCell>
+                <TableCell className="py-4">{formatPaymentMethods(ad.paymentMethods)}</TableCell>
+                <TableCell className="py-4">{getStatusBadge(ad.status)}</TableCell>
+                <TableCell className="py-4 text-right">
                   <DropdownMenu>
                     <DropdownMenuTrigger asChild>
                       <button className="p-1 hover:bg-gray-100 rounded-full">
@@ -315,11 +292,11 @@ export default function MyAdsTable({ ads, onAdDeleted }: MyAdsTableProps) {
                       </DropdownMenuItem>
                     </DropdownMenuContent>
                   </DropdownMenu>
-                </td>
-              </tr>
+                </TableCell>
+              </TableRow>
             ))}
-          </tbody>
-        </table>
+          </TableBody>
+        </Table>
       </div>
 
       <DeleteConfirmationDialog
@@ -331,7 +308,6 @@ export default function MyAdsTable({ ads, onAdDeleted }: MyAdsTableProps) {
         onCancel={cancelDelete}
       />
 
-      {/* Error Modal */}
       {errorModal.show && (
         <StatusModal
           type="error"
diff --git a/app/profile/components/stats-grid.tsx b/app/profile/components/stats-grid.tsx
index a392590873..4bd13372d0 100644
--- a/app/profile/components/stats-grid.tsx
+++ b/app/profile/components/stats-grid.tsx
@@ -3,42 +3,41 @@ import { Info } from "lucide-react"
 interface StatCardProps {
   title: string
   value: string | number
-  subtitle?: string
   hasInfo?: boolean
 }
 
-function StatCard({ title, value, subtitle, hasInfo = false }: StatCardProps) {
+function StatCard({ title, value, hasInfo = false }: StatCardProps) {
   return (
-    <div className="border rounded-lg p-4">
-      <div className="flex items-center text-sm text-gray-500 mb-1">
+    <div className="py-6">
+      <div className="text-slate-500 mb-2 font-normal text-sm leading-5 tracking-normal">
         {title}
-        {hasInfo && <Info className="h-4 w-4 ml-1 text-gray-400" />}
+        {hasInfo && <Info className="inline-block h-3 w-3 ml-1 text-slate-400" />}
+      </div>
+      <div className="font-bold text-black text-base leading-6 tracking-normal">
+        {value !== undefined && value !== null ? value : "N/A"}
       </div>
-      <div className="text-xl font-bold">{value !== undefined && value !== null ? value : "N/A"}</div>
-      {subtitle && <div className="text-sm text-gray-500">{subtitle}</div>}
     </div>
   )
 }
 
 interface StatsGridProps {
   stats:
-    | {
-        buyCompletion: { rate: string; period: string }
-        sellCompletion: { rate: string; period: string }
-        avgPayTime: { time: string; period: string }
-        avgReleaseTime: { time: string; period: string }
-        tradePartners: number
-        totalOrders30d: number
-        totalOrdersLifetime: number
-        tradeVolume30d: { amount: string; currency: string; period: string }
-        tradeVolumeLifetime: { amount: string; currency: string }
-      }
-    | null
-    | undefined // Allow null/undefined for stats
+  | {
+    buyCompletion: { rate: string; period: string }
+    sellCompletion: { rate: string; period: string }
+    avgPayTime: { time: string; period: string }
+    avgReleaseTime: { time: string; period: string }
+    tradePartners: number
+    totalOrders30d: number
+    totalOrdersLifetime: number
+    tradeVolume30d: { amount: string; currency: string; period: string }
+    tradeVolumeLifetime: { amount: string; currency: string }
+  }
+  | null
+  | undefined
 }
 
 export default function StatsGrid({ stats }: StatsGridProps) {
-  // Add a null check - if stats is null/undefined, provide default data
   const defaultStats = {
     buyCompletion: { rate: "N/A", period: "(30d)" },
     sellCompletion: { rate: "N/A", period: "(30d)" },
@@ -51,12 +50,11 @@ export default function StatsGrid({ stats }: StatsGridProps) {
     tradeVolumeLifetime: { amount: "0.00", currency: "USD" },
   }
 
-  // Use the stats object if it exists, otherwise use defaultStats
   const displayStats = stats || defaultStats
 
   return (
-    <div>
-      <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4 mb-4">
+    <div className="bg-custom-gray rounded-lg px-4">
+      <div className="grid grid-cols-1 md:grid-cols-3 border-b border-slate-200">
         <StatCard
           title={`Buy completion ${displayStats.buyCompletion.period}`}
           value={displayStats.buyCompletion.rate}
@@ -65,17 +63,10 @@ export default function StatsGrid({ stats }: StatsGridProps) {
           title={`Sell completion ${displayStats.sellCompletion.period}`}
           value={displayStats.sellCompletion.rate}
         />
-        <StatCard title={`Avg. pay time ${displayStats.avgPayTime.period}`} value={displayStats.avgPayTime.time} />
-        <StatCard
-          title={`Avg. release time ${displayStats.avgReleaseTime.period}`}
-          value={displayStats.avgReleaseTime.time}
-        />
         <StatCard title="Trade partners" value={displayStats.tradePartners} hasInfo={true} />
       </div>
 
-      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-        <StatCard title={`Total orders ${displayStats.buyCompletion.period}`} value={displayStats.totalOrders30d} />
-        <StatCard title="Total orders (Lifetime)" value={displayStats.totalOrdersLifetime} />
+      <div className="grid grid-cols-1 md:grid-cols-3 border-b border-slate-200">
         <StatCard
           title={`Trade volume ${displayStats.tradeVolume30d.period}`}
           value={`${displayStats.tradeVolume30d.currency} ${displayStats.tradeVolume30d.amount}`}
@@ -86,7 +77,18 @@ export default function StatsGrid({ stats }: StatsGridProps) {
           value={`${displayStats.tradeVolumeLifetime.currency} ${displayStats.tradeVolumeLifetime.amount}`}
           hasInfo={true}
         />
+        <StatCard title={`Avg. pay time ${displayStats.avgPayTime.period}`} value={displayStats.avgPayTime.time} />
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-3">
+        <StatCard title={`Total orders ${displayStats.buyCompletion.period}`} value={displayStats.totalOrders30d} />
+        <StatCard title="Total orders (Lifetime)" value={displayStats.totalOrdersLifetime} />
+        <StatCard
+          title={`Avg. release time ${displayStats.avgReleaseTime.period}`}
+          value={displayStats.avgReleaseTime.time}
+        />
       </div>
     </div>
   )
 }
+
diff --git a/app/profile/components/stats-tabs.tsx b/app/profile/components/stats-tabs.tsx
index 3a8484e7b3..82a256ac5b 100644
--- a/app/profile/components/stats-tabs.tsx
+++ b/app/profile/components/stats-tabs.tsx
@@ -1,21 +1,18 @@
 "use client"
 
 import type React from "react"
-import { useState } from "react"
+import { useState, useEffect } from "react"
 import StatsGrid from "./stats-grid"
 import PaymentMethodsTab from "./payment-methods-tab"
 import { Button } from "@/components/ui/button"
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"
 import AddPaymentMethodPanel from "./add-payment-method-panel"
 import { ProfileAPI } from "../api"
 import StatusModal from "./ui/status-modal"
 import NotificationBanner from "./notification-banner"
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import { PlusCircle } from "lucide-react"
-// Add USER import at the top with other imports
 import { USER, API, AUTH } from "@/lib/local-variables"
-import { useEffect } from "react"
 
-// Update the StatsTabsProps interface to make stats optional
 interface StatsTabsProps {
   children?: React.ReactNode
   stats?: any
@@ -34,7 +31,6 @@ export default function StatsTabs({ children, stats: initialStats }: StatsTabsPr
     message: "",
   })
   const [refreshKey, setRefreshKey] = useState(0)
-  // Modify userStats to include default values
   const [userStats, setUserStats] = useState<any>(
     initialStats || {
       buyCompletion: { rate: "N/A", period: "(30d)" },
@@ -54,11 +50,10 @@ export default function StatsTabs({ children, stats: initialStats }: StatsTabsPr
   const tabs = [
     { id: "stats", label: "Stats" },
     { id: "payment", label: "Payment methods" },
-    { id: "ads", label: "Ad details" },
-    { id: "counterparties", label: "My counterparties" },
+    { id: "ads", label: "Advertisers' instruction" },
+    { id: "counterparties", label: "Counterparties" },
   ]
 
-  // Add useEffect to fetch user stats
   useEffect(() => {
     const fetchUserStats = async () => {
       try {
@@ -82,66 +77,49 @@ export default function StatsTabs({ children, stats: initialStats }: StatsTabsPr
         const responseData = await response.json()
         console.log("User stats API response:", responseData)
 
-        // If we have data, transform it to match the expected format and update the stats state
         if (responseData && responseData.data) {
           const data = responseData.data
 
-          // Format the time values (from seconds to minutes)
           const formatTimeAverage = (minutes) => {
             if (!minutes || minutes <= 0) return "N/A"
-
-            // Convert minutes to days (1 day = 24 hours = 1440 minutes)
             const days = Math.floor(minutes / 1440)
-
-            // If less than 1 day, show 0 days
             return `${days} days`
           }
 
-          // Calculate total orders and amounts for 30 days
           const totalOrders30d = (data.buy_count_30day || 0) + (data.sell_count_30day || 0)
           const totalAmount30d = (data.buy_amount_30day || 0) + (data.sell_amount_30day || 0)
 
-          // Format completion rates
           const formatCompletionRate = (rate, count) => {
             if (rate === null || rate === undefined) return "N/A"
             return `${rate}% (${count || 0})`
           }
 
-          // Transform the data to match the expected format
           const transformedStats = {
             buyCompletion: {
-              // For Buy completion, we should show the completion rate with buy count
               rate: `${data.completion_average_30day || 0}%`,
               period: "(30d)",
             },
             sellCompletion: {
-              // For Sell completion, we should show the completion rate with sell count
               rate: `${data.completion_average_30day || 0}%`,
               period: "(30d)",
             },
             avgPayTime: {
-              // For Avg. pay time, use buy_time_average_30day
               time: formatTimeAverage(data.buy_time_average_30day),
               period: "(30d)",
             },
             avgReleaseTime: {
-              // For Avg. release time, use release_time_average_30day
               time: formatTimeAverage(data.release_time_average_30day),
               period: "(30d)",
             },
             tradePartners: data.trade_partners || 0,
-            // Total orders (30d) is buy_count_30day + sell_count_30day
             totalOrders30d: (data.buy_count_30day || 0) + (data.sell_count_30day || 0),
-            // Total orders lifetime is order_count_lifetime
             totalOrdersLifetime: data.order_count_lifetime || 0,
             tradeVolume30d: {
-              // Trade volume 30d is buy_amount_30day + sell_amount_30day
               amount: ((data.buy_amount_30day || 0) + (data.sell_amount_30day || 0)).toFixed(2),
               currency: "USD",
               period: "(30d)",
             },
             tradeVolumeLifetime: {
-              // Trade volume lifetime is order_amount_lifetime
               amount: data.order_amount_lifetime ? data.order_amount_lifetime.toFixed(2) : "0.00",
               currency: "USD",
             },
@@ -164,7 +142,6 @@ export default function StatsTabs({ children, stats: initialStats }: StatsTabsPr
     try {
       setIsAddingPaymentMethod(true)
 
-      // Log the data being sent to the API for debugging
       console.group("🔍 PAYMENT METHOD DATA FROM UI")
       console.log("Method:", method)
       console.log("Fields:", fields)
@@ -172,7 +149,6 @@ export default function StatsTabs({ children, stats: initialStats }: StatsTabsPr
 
       const result = await ProfileAPI.PaymentMethods.addPaymentMethod(method, fields)
 
-      // Log the result
       console.group("🔍 PAYMENT METHOD API RESULT")
       console.log("Success:", result.success)
       console.log("Data:", result.data)
@@ -180,23 +156,18 @@ export default function StatsTabs({ children, stats: initialStats }: StatsTabsPr
       console.groupEnd()
 
       if (result.success) {
-        // Close the panel
         setShowAddPaymentMethodPanel(false)
 
-        // Show success notification
         setNotification({
           show: true,
           message: "Payment method added.",
         })
 
-        // Refresh the payment methods list by incrementing the key
         setRefreshKey((prev) => prev + 1)
       } else {
-        // Get error message from the first error
         const errorMessage =
           result.errors && result.errors.length > 0 ? result.errors[0].message : "Failed to add payment method"
 
-        // Show error modal
         setErrorModal({
           show: true,
           message: errorMessage,
@@ -205,7 +176,6 @@ export default function StatsTabs({ children, stats: initialStats }: StatsTabsPr
     } catch (error) {
       console.error("Error adding payment method:", error)
 
-      // Show error modal
       setErrorModal({
         show: true,
         message: error instanceof Error ? error.message : "An unexpected error occurred",
@@ -224,68 +194,82 @@ export default function StatsTabs({ children, stats: initialStats }: StatsTabsPr
         />
       )}
 
-      <Tabs defaultValue="stats" value={activeTab} onValueChange={setActiveTab} className="w-full">
-        <div className="flex justify-between items-center mb-6">
-          <TabsList className="bg-gray-100">
+      <div className="mb-6">
+        <Tabs defaultValue="stats" onValueChange={setActiveTab}>
+          <TabsList className="bg-[#F5F5F5] rounded-2xl p-1 h-auto">
             {tabs.map((tab) => (
               <TabsTrigger
                 key={tab.id}
                 value={tab.id}
-                className="px-6 py-3 text-sm font-medium data-[state=active]:bg-white data-[state=active]:text-primary"
+                className="py-3 px-4 rounded-xl transition-all font-normal text-base data-[state=active]:bg-white data-[state=active]:text-black data-[state=active]:shadow-sm data-[state=inactive]:bg-transparent data-[state=inactive]:text-slate-500 hover:text-slate-700"
               >
                 {tab.label}
               </TabsTrigger>
             ))}
           </TabsList>
 
-          {activeTab === "payment" && (
-            <Button variant="primary" size="sm" onClick={() => setShowAddPaymentMethodPanel(true)}>
-              <PlusCircle className="mr-2 h-4 w-4" />
-              Add payment method
-            </Button>
-          )}
-        </div>
-
-        <TabsContent value="stats">
-          {isLoadingStats ? (
-            <div className="space-y-4">
-              <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4 mb-4">
-                {[...Array(5)].map((_, i) => (
-                  <div key={i} className="border rounded-lg p-4">
-                    <div className="animate-pulse bg-gray-200 h-4 w-3/4 mb-2 rounded"></div>
-                    <div className="animate-pulse bg-gray-200 h-6 w-1/2 rounded"></div>
+          <TabsContent value="stats">
+            {isLoadingStats ? (
+              <div className="space-y-4">
+                <div className="bg-[#F5F5F5] rounded-lg p-4">
+                  <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                    {[...Array(3)].map((_, i) => (
+                      <div key={i} className="py-4">
+                        <div className="animate-pulse bg-slate-200 h-4 w-3/4 mb-2 rounded"></div>
+                        <div className="animate-pulse bg-slate-200 h-8 w-1/2 rounded"></div>
+                      </div>
+                    ))}
                   </div>
-                ))}
-              </div>
-              <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-                {[...Array(4)].map((_, i) => (
-                  <div key={i} className="border rounded-lg p-4">
-                    <div className="animate-pulse bg-gray-200 h-4 w-3/4 mb-2 rounded"></div>
-                    <div className="animate-pulse bg-gray-200 h-6 w-1/2 rounded"></div>
+                  <div className="grid grid-cols-1 md:grid-cols-3 gap-4 border-t border-b border-slate-200 py-2">
+                    {[...Array(3)].map((_, i) => (
+                      <div key={i} className="py-4">
+                        <div className="animate-pulse bg-slate-200 h-4 w-3/4 mb-2 rounded"></div>
+                        <div className="animate-pulse bg-slate-200 h-8 w-1/2 rounded"></div>
+                      </div>
+                    ))}
                   </div>
-                ))}
+                  <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                    {[...Array(3)].map((_, i) => (
+                      <div key={i} className="py-4">
+                        <div className="animate-pulse bg-slate-200 h-4 w-3/4 mb-2 rounded"></div>
+                        <div className="animate-pulse bg-slate-200 h-8 w-1/2 rounded"></div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            ) : (
+              <StatsGrid stats={userStats} />
+            )}
+          </TabsContent>
+
+          <TabsContent value="payment">
+            <div className="relative">
+              <div className="flex justify-end mb-4">
+                <Button variant="primary" size="sm" onClick={() => setShowAddPaymentMethodPanel(true)}>
+                  <PlusCircle className="mr-2 h-4 w-4" />
+                  Add payment method
+                </Button>
               </div>
+              <PaymentMethodsTab key={refreshKey} />
             </div>
-          ) : (
-            <StatsGrid stats={userStats} />
-          )}
-        </TabsContent>
-        <TabsContent value="payment">
-          <PaymentMethodsTab key={refreshKey} />
-        </TabsContent>
-        <TabsContent value="ads">
-          <div className="p-4 border rounded-lg">
-            <h3 className="text-lg font-medium mb-4">Ad details</h3>
-            <p className="text-gray-500">Your ad details will appear here.</p>
-          </div>
-        </TabsContent>
-        <TabsContent value="counterparties">
-          <div className="p-4 border rounded-lg">
-            <h3 className="text-lg font-medium mb-4">My counterparties</h3>
-            <p className="text-gray-500">Your counterparties will appear here.</p>
-          </div>
-        </TabsContent>
-      </Tabs>
+          </TabsContent>
+
+          <TabsContent value="ads">
+            <div className="p-4 border rounded-lg">
+              <h3 className="text-lg font-medium mb-4">Advertisers' instruction</h3>
+              <p className="text-slate-500">Your ad details will appear here.</p>
+            </div>
+          </TabsContent>
+
+          <TabsContent value="counterparties">
+            <div className="p-4 border rounded-lg">
+              <h3 className="text-lg font-medium mb-4">Counterparties</h3>
+              <p className="text-slate-500">Your counterparties will appear here.</p>
+            </div>
+          </TabsContent>
+        </Tabs>
+      </div>
 
       {showAddPaymentMethodPanel && (
         <AddPaymentMethodPanel
@@ -306,4 +290,3 @@ export default function StatsTabs({ children, stats: initialStats }: StatsTabsPr
     </div>
   )
 }
-
diff --git a/app/profile/components/ui/custom-shimmer.tsx b/app/profile/components/ui/custom-shimmer.tsx
index be21b5ef17..2a848535aa 100644
--- a/app/profile/components/ui/custom-shimmer.tsx
+++ b/app/profile/components/ui/custom-shimmer.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 export function CustomShimmer({ className }: { className?: string }) {
-  return <div className={`animate-pulse bg-gray-200 rounded-md ${className}`} />
+    return <div className={`animate-pulse bg-gray-200 rounded-md ${className}`} />
 }
diff --git a/app/profile/components/ui/custom-status-modal.tsx b/app/profile/components/ui/custom-status-modal.tsx
index d2ca356943..fe63b83f1c 100644
--- a/app/profile/components/ui/custom-status-modal.tsx
+++ b/app/profile/components/ui/custom-status-modal.tsx
@@ -2,7 +2,7 @@
 import { AlertDialog, AlertDialogContent } from "@/components/ui/alert-dialog"
 import { CheckCircle, AlertCircle, X } from "lucide-react"
 
-interface CustomStatusModalProps {
+interface StatusModalProps {
   type: "success" | "error" | "warning"
   title: string
   message: string
@@ -10,42 +10,38 @@ interface CustomStatusModalProps {
   onClose: () => void
 }
 
-export default function CustomStatusModal({ type, title, message, subMessage, onClose }: CustomStatusModalProps) {
+export default function StatusModal({ type, title, message, subMessage, onClose }: StatusModalProps) {
   return (
     <AlertDialog open={true} onOpenChange={(isOpen) => !isOpen && onClose()}>
       <AlertDialogContent className="p-0 overflow-hidden border-none">
         <div className="relative p-6">
-          {/* Top section with icon and close button */}
           <div className="flex justify-center mb-12">
             <div
-              className={`${
-                type === "success" ? "bg-green-100" : "bg-yellow-100"
-              } rounded-full p-2 flex items-center justify-center`}
+              className={`${type === "success" ? "bg-success-bg" : "bg-warning-bg"
+                } rounded-full p-2 flex items-center justify-center`}
             >
               {type === "success" ? (
-                <CheckCircle className="h-8 w-8 text-green-600" />
+                <CheckCircle className="h-8 w-8 text-success-icon" />
               ) : (
-                <AlertCircle className="h-8 w-8 text-yellow-600" />
+                <AlertCircle className="h-8 w-8 text-warning-icon" />
               )}
             </div>
 
             <button
               onClick={onClose}
-              className="absolute top-6 right-6 text-gray-400 hover:text-gray-600"
+              className="absolute top-6 right-6 text-slate-400 hover:text-slate-600"
               aria-label="Close"
             >
               <X className="h-5 w-5" />
             </button>
           </div>
 
-          {/* Content section - left aligned */}
           <div className="mb-12">
             <h2 className="text-xl font-semibold mb-4">{title}</h2>
-            <p className="text-gray-700">{message}</p>
-            {subMessage && <p className="text-gray-500 mt-4">{subMessage}</p>}
+            <p className="text-slate-600">{message}</p>
+            {subMessage && <p className="text-slate-500 mt-4">{subMessage}</p>}
           </div>
 
-          {/* Button at the bottom */}
           <button
             onClick={onClose}
             className="w-full h-10 bg-primary text-primary-foreground rounded-md hover:bg-primary/90"
@@ -57,3 +53,4 @@ export default function CustomStatusModal({ type, title, message, subMessage, on
     </AlertDialog>
   )
 }
+
diff --git a/app/profile/page.tsx b/app/profile/page.tsx
index 0a91975912..3e07aefb93 100644
--- a/app/profile/page.tsx
+++ b/app/profile/page.tsx
@@ -3,7 +3,6 @@
 import { useState, useEffect } from "react"
 import Navigation from "@/components/navigation"
 import UserInfo from "@/components/profile/user-info"
-import BusinessHours from "@/components/profile/business-hours"
 import TradeLimits from "@/components/profile/trade-limits"
 import StatsTabs from "./components/stats-tabs"
 import { USER, API, AUTH } from "@/lib/local-variables"
@@ -67,12 +66,10 @@ export default function ProfilePage() {
         }
 
         const responseData = await response.json()
-        console.log("User data API response:", responseData)
 
         if (responseData && responseData.data) {
           const data = responseData.data
 
-          // Convert timestamp to date string
           const joinDate = new Date(data.created_at)
           const now = new Date()
           const diff = now.getTime() - joinDate.getTime()
@@ -87,7 +84,6 @@ export default function ProfilePage() {
             joinDateString = `Joined ${days} days ago`
           }
 
-          // Update user data with the retrieved information
           setUserData((prevData) => ({
             ...prevData,
             username: data.nickname || prevData.username,
@@ -119,23 +115,29 @@ export default function ProfilePage() {
     <div className="px-4 md:px-4">
       <Navigation title="P2P Wallet" />
 
-      <UserInfo
-        username={userData.username}
-        rating={userData.rating}
-        completionRate={userData.completionRate}
-        joinDate={userData.joinDate}
-        blockedCount={userData.blockedCount}
-        realName={userData.realName}
-        isVerified={userData.isVerified}
-      />
-
-      <div className="grid md:grid-cols-2 gap-6">
-        <BusinessHours isOpen={userData.businessHours.isOpen} availability={userData.businessHours.availability} />
-
-        <TradeLimits buyLimit={userData.tradeLimits.buy} sellLimit={userData.tradeLimits.sell} />
+      <div className="flex flex-col md:flex-row gap-6 h-full">
+        <div className="flex-1 order-1">
+          <UserInfo
+            username={userData.username}
+            rating={userData.rating}
+            completionRate={userData.completionRate}
+            joinDate={userData.joinDate}
+            blockedCount={userData.blockedCount}
+            realName={userData.realName}
+            isVerified={userData.isVerified}
+          />
+          <StatsTabs stats={userData.stats} />
+        </div>
+
+        <div className="md:w-[40%] h-full flex flex-col gap-6 order-2">
+          <TradeLimits
+            buyLimit={userData.tradeLimits.buy}
+            sellLimit={userData.tradeLimits.sell}
+            balance={userData.balance}
+          />
+
+        </div>
       </div>
-
-      <StatsTabs stats={userData.stats} />
     </div>
   )
 }
diff --git a/components/navigation.tsx b/components/navigation.tsx
index 2c99ac2bb1..041a65f003 100644
--- a/components/navigation.tsx
+++ b/components/navigation.tsx
@@ -26,7 +26,7 @@ export default function Navigation({
   const navItems = [
     { name: "Buy/Sell", href: "/" },
     { name: "Orders", href: "/orders" },
-    { name: "My ads", href: "/my-ads" },
+    { name: "My ads", href: "/ads" },
     { name: "Profile", href: "/profile" },
   ]
 
diff --git a/components/profile/business-hours.tsx b/components/profile/business-hours.tsx
index f63968599a..5c7ce92a4d 100644
--- a/components/profile/business-hours.tsx
+++ b/components/profile/business-hours.tsx
@@ -1,4 +1,6 @@
-import { Info, Edit } from "lucide-react"
+import { Info, PenLine } from "lucide-react"
+import { Checkbox } from "@/components/ui/checkbox"
+import { Label } from "@/components/ui/label"
 
 interface BusinessHoursProps {
   isOpen: boolean
@@ -7,18 +9,36 @@ interface BusinessHoursProps {
 
 export default function BusinessHours({ isOpen, availability }: BusinessHoursProps) {
   return (
-    <div className="border rounded-lg p-4 mb-6">
+    <div className="border rounded-lg p-4">
       <div className="flex items-center justify-between mb-2">
         <div className="flex items-center">
-          <h3 className="font-medium">Business hours</h3>
-          <Info className="h-4 w-4 ml-1 text-gray-400" />
+          <h3 className="text-base font-normal leading-6 tracking-normal">Business hours</h3>
+          <Info className="h-3 w-3 ml-2 text-slate-400" />
+        </div>
+        <div className="flex items-center">
+          <span className={`text-base font-bold leading-6 tracking-normal ${isOpen ? "text-success" : "text-error"}`}>
+            {isOpen ? "Open now" : "Closed"}
+          </span>
+          <button className="ml-2 text-slate-500">
+            <PenLine className="h-5 w-5" />
+          </button>
+        </div>
+      </div>
+
+      <div className="border-t my-4"></div>
+
+      <div className="flex items-center justify-between mt-6">
+        <div>
+          <h3 className="text-sm font-normal leading-5 tracking-normal">Show my real name</h3>
+          <p className="text-slate-500 text-xs font-normal leading-5 tracking-normal">Jonathan Nick Does</p>
+        </div>
+        <div className="flex items-center space-x-2">
+          <Checkbox id="show-real-name" defaultChecked />
+          <Label htmlFor="show-real-name" className="sr-only">
+            Show my real name
+          </Label>
         </div>
-        <button className="text-gray-500">
-          <Edit className="h-4 w-4" />
-        </button>
       </div>
-      <div className="text-green-600 font-medium">{isOpen ? "Open now" : "Closed"}</div>
-      <div className="text-sm text-gray-500">({availability})</div>
     </div>
   )
 }
diff --git a/components/profile/stats-tabs.tsx b/components/profile/stats-tabs.tsx
index b2360469ad..a423f47783 100644
--- a/components/profile/stats-tabs.tsx
+++ b/components/profile/stats-tabs.tsx
@@ -1,43 +1,269 @@
 "use client"
 
 import type React from "react"
-
-import { useState } from "react"
-import { cn } from "@/lib/utils"
+import { useState, useEffect } from "react"
+import StatsGrid from "./stats-grid"
+import PaymentMethodsTab from "./payment-methods-tab"
+import { Button } from "@/components/ui/button"
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"
+import AddPaymentMethodPanel from "./add-payment-method-panel"
+import { ProfileAPI } from "../api"
+import StatusModal from "./ui/status-modal"
+import NotificationBanner from "./notification-banner"
+import { PlusCircle } from "lucide-react"
+import { USER, API, AUTH } from "@/lib/local-variables"
 
 interface StatsTabsProps {
-  children: React.ReactNode
+  children?: React.ReactNode
+  stats?: any
 }
 
-export default function StatsTabs({ children }: StatsTabsProps) {
+export default function StatsTabs({ children, stats: initialStats }: StatsTabsProps) {
   const [activeTab, setActiveTab] = useState("stats")
+  const [showAddPaymentMethodPanel, setShowAddPaymentMethodPanel] = useState(false)
+  const [isAddingPaymentMethod, setIsAddingPaymentMethod] = useState(false)
+  const [notification, setNotification] = useState<{ show: boolean; message: string }>({
+    show: false,
+    message: "",
+  })
+  const [errorModal, setErrorModal] = useState<{ show: boolean; message: string }>({
+    show: false,
+    message: "",
+  })
+  const [refreshKey, setRefreshKey] = useState(0)
+  const [userStats, setUserStats] = useState<any>(
+    initialStats || {
+      buyCompletion: { rate: "N/A", period: "(30d)" },
+      sellCompletion: { rate: "N/A", period: "(30d)" },
+      avgPayTime: { time: "N/A", period: "(30d)" },
+      avgReleaseTime: { time: "N/A", period: "(30d)" },
+      tradePartners: 0,
+      totalOrders30d: 0,
+      totalOrdersLifetime: 0,
+      tradeVolume30d: { amount: "0.00", currency: "USD", period: "(30d)" },
+      tradeVolumeLifetime: { amount: "0.00", currency: "USD" },
+    },
+  )
+
+  const [isLoadingStats, setIsLoadingStats] = useState(false)
 
   const tabs = [
     { id: "stats", label: "Stats" },
     { id: "payment", label: "Payment methods" },
-    { id: "ads", label: "Ad details" },
-    { id: "counterparties", label: "My counterparties" },
+    { id: "ads", label: "Advertisers' instruction" },
+    { id: "counterparties", label: "Counterparties" },
   ]
 
+  useEffect(() => {
+    const fetchUserStats = async () => {
+      try {
+        setIsLoadingStats(true)
+        const userId = USER.id
+        const url = `${API.baseUrl}/users/${userId}`
+
+        const response = await fetch(url, {
+          headers: {
+            ...AUTH.getAuthHeader(),
+            accept: "application/json",
+          },
+        })
+
+        if (!response.ok) {
+          throw new Error(`Failed to fetch user stats: ${response.status} ${response.statusText}`)
+        }
+
+        const responseData = await response.json()
+
+        if (responseData && responseData.data) {
+          const data = responseData.data
+
+          const formatTimeAverage = (minutes) => {
+            if (!minutes || minutes <= 0) return "N/A"
+            const days = Math.floor(minutes / 1440)
+            return `${days} days`
+          }
+
+          const transformedStats = {
+            buyCompletion: {
+              rate: `${data.completion_average_30day || 0}%`,
+              period: "(30d)",
+            },
+            sellCompletion: {
+              rate: `${data.completion_average_30day || 0}%`,
+              period: "(30d)",
+            },
+            avgPayTime: {
+              time: formatTimeAverage(data.buy_time_average_30day),
+              period: "(30d)",
+            },
+            avgReleaseTime: {
+              time: formatTimeAverage(data.release_time_average_30day),
+              period: "(30d)",
+            },
+            tradePartners: data.trade_partners || 0,
+            totalOrders30d: (data.buy_count_30day || 0) + (data.sell_count_30day || 0),
+            totalOrdersLifetime: data.order_count_lifetime || 0,
+            tradeVolume30d: {
+              amount: ((data.buy_amount_30day || 0) + (data.sell_amount_30day || 0)).toFixed(2),
+              currency: "USD",
+              period: "(30d)",
+            },
+            tradeVolumeLifetime: {
+              amount: data.order_amount_lifetime ? data.order_amount_lifetime.toFixed(2) : "0.00",
+              currency: "USD",
+            },
+          }
+
+          setUserStats(transformedStats)
+        }
+      } catch (error) {
+        console.error("Error fetching user stats:", error)
+      } finally {
+        setIsLoadingStats(false)
+      }
+    }
+
+    fetchUserStats()
+  }, [])
+
+  const handleAddPaymentMethod = async (method: string, fields: Record<string, string>) => {
+    try {
+      setIsAddingPaymentMethod(true)
+
+      const result = await ProfileAPI.PaymentMethods.addPaymentMethod(method, fields)
+
+      if (result.success) {
+        setShowAddPaymentMethodPanel(false)
+
+        setNotification({
+          show: true,
+          message: "Payment method added.",
+        })
+
+        setRefreshKey((prev) => prev + 1)
+      } else {
+        const errorMessage =
+          result.errors && result.errors.length > 0 ? result.errors[0].message : "Failed to add payment method"
+
+        setErrorModal({
+          show: true,
+          message: errorMessage,
+        })
+      }
+    } catch (error) {
+      console.error("Error adding payment method:", error)
+
+      setErrorModal({
+        show: true,
+        message: error instanceof Error ? error.message : "An unexpected error occurred",
+      })
+    } finally {
+      setIsAddingPaymentMethod(false)
+    }
+  }
+
   return (
-    <div>
-      <div className="border rounded-lg overflow-hidden">
-        <div className="flex border-b">
-          {tabs.map((tab) => (
-            <button
-              key={tab.id}
-              onClick={() => setActiveTab(tab.id)}
-              className={cn(
-                "px-4 py-3 text-sm font-medium flex-1 text-center",
-                activeTab === tab.id ? "bg-gray-100 text-gray-900" : "bg-white text-gray-500 hover:bg-gray-50",
-              )}
-            >
-              {tab.label}
-            </button>
-          ))}
-        </div>
-        <div className="p-4">{children}</div>
+    <div className="relative">
+      {notification.show && (
+        <NotificationBanner
+          message={notification.message}
+          onClose={() => setNotification({ show: false, message: "" })}
+        />
+      )}
+
+      <div className="mb-6">
+        <Tabs defaultValue="stats" onValueChange={setActiveTab}>
+          <TabsList className="bg-custom-gray rounded-2xl p-1 h-auto">
+            {tabs.map((tab) => (
+              <TabsTrigger
+                key={tab.id}
+                value={tab.id}
+                className="py-3 px-4 rounded-xl transition-all font-normal text-base data-[state=active]:bg-white data-[state=active]:text-black data-[state=active]:shadow-sm data-[state=inactive]:bg-transparent data-[state=inactive]:text-slate-500 hover:text-slate-700"
+              >
+                {tab.label}
+              </TabsTrigger>
+            ))}
+          </TabsList>
+
+          <TabsContent value="stats">
+            {isLoadingStats ? (
+              <div className="space-y-4">
+                <div className="bg-custom-gray rounded-lg p-4">
+                  <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                    {[...Array(3)].map((_, i) => (
+                      <div key={i} className="py-4">
+                        <div className="animate-pulse bg-slate-200 h-4 w-3/4 mb-2 rounded"></div>
+                        <div className="animate-pulse bg-slate-200 h-8 w-1/2 rounded"></div>
+                      </div>
+                    ))}
+                  </div>
+                  <div className="grid grid-cols-1 md:grid-cols-3 gap-4 border-t border-b border-slate-200 py-2">
+                    {[...Array(3)].map((_, i) => (
+                      <div key={i} className="py-4">
+                        <div className="animate-pulse bg-slate-200 h-4 w-3/4 mb-2 rounded"></div>
+                        <div className="animate-pulse bg-slate-200 h-8 w-1/2 rounded"></div>
+                      </div>
+                    ))}
+                  </div>
+                  <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                    {[...Array(3)].map((_, i) => (
+                      <div key={i} className="py-4">
+                        <div className="animate-pulse bg-slate-200 h-4 w-3/4 mb-2 rounded"></div>
+                        <div className="animate-pulse bg-slate-200 h-8 w-1/2 rounded"></div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            ) : (
+              <StatsGrid stats={userStats} />
+            )}
+          </TabsContent>
+
+          <TabsContent value="payment">
+            <div className="relative">
+              <div className="flex justify-end mb-4">
+                <Button variant="primary" size="sm" onClick={() => setShowAddPaymentMethodPanel(true)}>
+                  <PlusCircle className="mr-2 h-4 w-4" />
+                  Add payment method
+                </Button>
+              </div>
+              <PaymentMethodsTab key={refreshKey} />
+            </div>
+          </TabsContent>
+
+          <TabsContent value="ads">
+            <div className="p-4 border rounded-lg">
+              <h3 className="text-lg font-medium mb-4">Advertisers' instruction</h3>
+              <p className="text-slate-500">Your ad details will appear here.</p>
+            </div>
+          </TabsContent>
+
+          <TabsContent value="counterparties">
+            <div className="p-4 border rounded-lg">
+              <h3 className="text-lg font-medium mb-4">Counterparties</h3>
+              <p className="text-slate-500">Your counterparties will appear here.</p>
+            </div>
+          </TabsContent>
+        </Tabs>
       </div>
+
+      {showAddPaymentMethodPanel && (
+        <AddPaymentMethodPanel
+          onClose={() => setShowAddPaymentMethodPanel(false)}
+          onAdd={handleAddPaymentMethod}
+          isLoading={isAddingPaymentMethod}
+        />
+      )}
+
+      {errorModal.show && (
+        <StatusModal
+          type="error"
+          title="Error"
+          message={errorModal.message}
+          onClose={() => setErrorModal({ show: false, message: "" })}
+        />
+      )}
     </div>
   )
 }
diff --git a/components/profile/trade-limits.tsx b/components/profile/trade-limits.tsx
index e497ac7077..acb4067124 100644
--- a/components/profile/trade-limits.tsx
+++ b/components/profile/trade-limits.tsx
@@ -1,3 +1,6 @@
+import { CustomShimmer } from "@/app/profile/components/ui/custom-shimmer"
+import { Button } from "@/components/ui/button"
+
 interface TradeLimitsProps {
   buyLimit: {
     current: number
@@ -7,41 +10,79 @@ interface TradeLimitsProps {
     current: number
     max: number
   }
+  balance?: number
+  isLoading?: boolean
+  userData?: any // Add userData prop to accept the API response
 }
 
-export default function TradeLimits({ buyLimit, sellLimit }: TradeLimitsProps) {
-  const buyPercentage = (buyLimit.current / buyLimit.max) * 100
-  const sellPercentage = (sellLimit.current / sellLimit.max) * 100
+export default function TradeLimits({
+  buyLimit,
+  sellLimit,
+  balance = 0,
+  isLoading = false,
+  userData, // Accept userData from parent component
+}: TradeLimitsProps) {
+  // Use API data if available, otherwise fall back to props
+  const userBalance = userData?.balances?.USD ?? balance
+  const buyMax = userData?.daily_limits?.buy ?? buyLimit.max
+  const buyRemaining = userData?.daily_limits_remaining?.buy ?? buyLimit.current
+  const sellMax = userData?.daily_limits?.sell ?? sellLimit.max
+  const sellRemaining = userData?.daily_limits_remaining?.sell ?? sellLimit.current
+
+  // Calculate percentages based on API data if available
+  const buyPercentage = (buyRemaining / buyMax) * 100
+  const sellPercentage = (sellRemaining / sellMax) * 100
 
   return (
-    <div className="border rounded-lg p-4 mb-6">
-      <h3 className="font-medium mb-4">Daily trade limit</h3>
-
-      <div className="grid grid-cols-2 gap-4">
-        <div>
-          <div className="flex items-center justify-between mb-1">
-            <span className="text-primary font-medium">Buy</span>
-            <span className="text-sm">
-              USD {buyLimit.current.toFixed(2)} / {buyLimit.max.toFixed(2)}
-            </span>
+    <div className="border rounded-lg p-4">
+      <div className="mb-6">
+        <div className="flex justify-between">
+          <div>
+            <h3 className="text-base font-normal mb-3 leading-6 tracking-normal">P2P Balance</h3>
+            {isLoading ? (
+              <CustomShimmer className="h-8 w-32" />
+            ) : (
+              <div className="text-2xl font-extrabold leading-8 tracking-normal">USD {userBalance.toFixed(2)}</div>
+            )}
           </div>
-          <div className="h-2 bg-gray-200 rounded-full overflow-hidden">
-            <div className="h-full bg-primary rounded-full" style={{ width: `${buyPercentage}%` }}></div>
+          <div className="flex flex-col justify-end">
+            <Button variant="cyan" size="pill" className="w-[124px] h-[48px] font-bold">
+              Transfer
+            </Button>
           </div>
         </div>
+      </div>
 
-        <div>
-          <div className="flex items-center justify-between mb-1">
-            <span className="text-secondary font-medium">Sell</span>
-            <span className="text-sm">
-              USD {sellLimit.current.toFixed(2)} / {sellLimit.max.toFixed(2)}
-            </span>
+      <div className="border-t pt-4">
+        <h3 className="text-base font-normal mb-3 leading-6 tracking-normal">Daily trade limit</h3>
+
+        <div className="space-y-4">
+          <div>
+            <div className="flex items-center justify-between mb-1">
+              <span className="text-buy font-bold text-sm leading-5 tracking-normal">Buy</span>
+              <span className="text-sm font-normal leading-5 tracking-normal">
+                USD {buyRemaining.toFixed(2)} / {buyMax.toFixed(2)}
+              </span>
+            </div>
+            <div className="h-2 bg-gray-200 rounded-full overflow-hidden">
+              <div className={`h-full bg-black rounded-full w-[${buyPercentage}%]`}></div>
+            </div>
           </div>
-          <div className="h-2 bg-gray-200 rounded-full overflow-hidden">
-            <div className="h-full bg-secondary rounded-full" style={{ width: `${sellPercentage}%` }}></div>
+
+          <div>
+            <div className="flex items-center justify-between mb-1">
+              <span className="text-sell font-bold text-sm leading-5 tracking-normal">Sell</span>
+              <span className="text-sm font-normal leading-5 tracking-normal">
+                USD {sellRemaining.toFixed(2)} / {sellMax.toFixed(2)}
+              </span>
+            </div>
+            <div className="h-2 bg-gray-200 rounded-full overflow-hidden">
+              <div className={`h-full bg-black rounded-full w-[${sellPercentage}%]`}></div>
+            </div>
           </div>
         </div>
       </div>
     </div>
   )
 }
+
diff --git a/components/profile/user-info.tsx b/components/profile/user-info.tsx
index dd81699a33..e595c6e035 100644
--- a/components/profile/user-info.tsx
+++ b/components/profile/user-info.tsx
@@ -2,7 +2,6 @@
 
 import { useState, useEffect } from "react"
 import { Star, Check, Info } from "lucide-react"
-import { Switch } from "@/components/ui/switch"
 import { USER } from "@/lib/local-variables"
 
 interface UserInfoProps {
@@ -16,6 +15,7 @@ interface UserInfoProps {
     id: boolean
     address: boolean
     phone: boolean
+    email?: boolean
   }
 }
 
@@ -32,100 +32,78 @@ export default function UserInfo({
   const [isLoading, setIsLoading] = useState(false)
 
   useEffect(() => {
-    console.log("UserInfo props received:", {
-      username,
-      rating,
-      completionRate,
-      joinDate,
-      blockedCount,
-      realName,
-      isVerified,
-    })
-
     try {
       if (USER && USER.nickname) {
-        console.log("Using nickname from local variables:", USER.nickname)
         setNickname(USER.nickname)
-      } else {
-        console.log("No nickname found in local variables, using prop:", username)
       }
     } catch (error) {
       console.error("Error accessing user data:", error)
     }
-
-    // Log rendering values
-    if (rating) console.log("Rendering rating:", rating)
-    else console.log("Rating not available or is default")
-
-    if (completionRate) console.log("Rendering completion rate:", completionRate)
-    else console.log("Completion rate not available or is default")
-
-    if (joinDate) console.log("Rendering join date:", joinDate)
-    else console.log("Join date not available or is default")
-
-    if (blockedCount > 0) console.log("Rendering blocked count:", blockedCount)
-    else console.log("Blocked count not available or is zero")
   }, [username, rating, completionRate, joinDate, blockedCount, realName, isVerified])
 
   return (
-    <div className="mb-8">
+    <div className="mb-8 w-fit max-w-3xl">
       <div className="flex items-start gap-4">
-        <div className="h-16 w-16 rounded-full bg-gray-900 flex items-center justify-center text-white font-bold text-xl">
+        <div className="h-16 w-16 rounded-full bg-slate-900 flex items-center justify-center text-white font-bold text-xl">
           {nickname.charAt(0).toUpperCase()}
         </div>
         <div className="flex-1">
           <h2 className="text-xl font-bold">{nickname}</h2>
-          <div className="flex items-center gap-4 mt-1 text-sm">
+          <div className="flex items-center mt-1 text-sm">
             {rating && (
               <div className="flex items-center">
-                <Star className="h-4 w-4 text-yellow-500 mr-1" />
-                <span className="text-gray-700">{rating}</span>
+                <Star className="h-4 w-4 text-warning-icon mr-1" />
+                <span className="text-slate-600">{rating}</span>
               </div>
             )}
 
+            {rating && completionRate && <div className="mx-4 h-4 w-px bg-slate-300"></div>}
+
             {completionRate && (
-              <div className="flex items-center text-gray-700">
+              <div className="flex items-center text-slate-600">
                 <Check className="h-4 w-4 text-primary mr-1" />
                 <span>{completionRate}</span>
-                <Info className="h-4 w-4 ml-1 text-gray-400" />
+                <Info className="h-4 w-4 ml-1 text-slate-400" />
               </div>
             )}
 
-            {joinDate && <div className="text-gray-700">{joinDate}</div>}
+            {completionRate && joinDate && <div className="mx-4 h-4 w-px bg-slate-300"></div>}
 
-            {blockedCount > 0 && (
-              <div className="text-gray-700">Blocked by: {blockedCount}</div>
-            )}
+            {joinDate && <div className="text-slate-600">{joinDate}</div>}
+
+            {joinDate && blockedCount > 0 && <div className="mx-4 h-4 w-px bg-slate-300"></div>}
+
+            {blockedCount > 0 && <div className="text-slate-600">Blocked by: {blockedCount}</div>}
           </div>
           <div className="flex flex-wrap gap-2 mt-3">
             {isVerified.id && (
-              <div className="bg-primary/10 text-primary px-3 py-1 rounded-full text-xs flex items-center">
-                <Check className="h-3 w-3 mr-1" />
+              <div className="bg-success-bg text-success px-3 h-[24px] rounded-[4px] text-xs flex items-center">
+                <Check className="h-3 w-3 mr-1 text-success" />
                 ID
               </div>
             )}
             {isVerified.address && (
-              <div className="bg-primary/10 text-primary px-3 py-1 rounded-full text-xs flex items-center">
-                <Check className="h-3 w-3 mr-1" />
+              <div className="bg-success-bg text-success px-3 h-[24px] rounded-[4px] text-xs flex items-center">
+                <Check className="h-3 w-3 mr-1 text-success" />
                 Address
               </div>
             )}
             {isVerified.phone && (
-              <div className="bg-primary/10 text-primary px-3 py-1 rounded-full text-xs flex items-center">
-                <Check className="h-3 w-3 mr-1" />
+              <div className="bg-success-bg text-success px-3 h-[24px] rounded-[4px] text-xs flex items-center">
+                <Check className="h-3 w-3 mr-1 text-success" />
                 Phone number
               </div>
             )}
+            <div className="bg-success-bg text-success px-3 h-[24px] rounded-[4px] text-xs flex items-center">
+              <Check className="h-3 w-3 mr-1 text-success" />
+              Email
+            </div>
           </div>
         </div>
-        <div className="flex items-center gap-2">
-          <div className="text-right">
-            <div className="text-sm text-gray-700">Show my real name</div>
-            <div className="text-xs text-gray-500">{realName}</div>
-          </div>
-          <Switch />
-        </div>
       </div>
     </div>
   )
 }
+
+
+
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 4c24050e49..412f2c1857 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -99,6 +99,10 @@ const config: Config = {
         teal: {
           700: "#00CCCC",
         },
+        // Add the custom gray color
+        "custom-gray": {
+          DEFAULT: "#F5F5F5",
+        },
         // Additional colors for status indicators
         info: {
           light: "rgba(55, 124, 252, 0.1)",


Reviews:
user: login: farrah-deriv
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-04-17T05:24:22Z
user: login: farrah-deriv
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-04-17T05:25:04Z
user: login: farrah-deriv
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-04-17T05:25:26Z
user: login: farrah-deriv
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-04-17T05:25:31Z
user: login: farrah-deriv
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-04-17T05:26:10Z
user: login: farrah-deriv
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-04-17T05:26:44Z
user: login: farrah-deriv
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-04-17T05:28:35Z
user: login: farrah-deriv
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-04-17T05:29:36Z
user: login: farrah-deriv
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-04-17T08:27:31Z
user: login: farrah-deriv
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-04-17T08:27:34Z
user: login: farrah-deriv
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-04-17T08:30:43Z
user: login: farrah-deriv
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-04-17T08:30:49Z
user: login: farrah-deriv
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-04-17T08:31:20Z
user: login: farrah-deriv
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-04-17T10:58:06Z
user: login: farrah-deriv
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-04-17T10:59:55Z

Review comments:
diff_hunk: @@ -242,13 +242,19 @@ export default function MyAdsTable({ ads, onAdDeleted }: MyAdsTableProps) {
         <table className="w-full border-collapse">
           <thead>
             <tr className="border-b">
-              <th className="text-left py-4 font-bold text-black text-sm">Ad ID</th>
-              <th className="text-left py-4 font-bold text-black text-sm">Rate (USD 1)</th>
-              <th className="text-left py-4 font-bold text-black text-sm">Limits</th>
-              <th className="text-left py-4 font-bold text-black text-sm">Available amount</th>
-              <th className="text-left py-4 font-bold text-black text-sm">Payment methods</th>
-              <th className="text-left py-4 font-bold text-black text-sm">Status</th>
-              <th className="text-left py-4 font-bold text-black text-sm"></th>
+              <th className="text-left py-4 text-slate-600 font-normal text-sm leading-5 tracking-normal">Ad ID</th>
path: app/ads/components/my-ads-table.tsx
user: login: farrah-deriv
body: Please use the Table component.
created_at: 2025-04-17T05:24:22Z
author_association: COLLABORATOR
diff_hunk: @@ -51,12 +57,13 @@ export default function StatsGrid({ stats }: StatsGridProps) {
     tradeVolumeLifetime: { amount: "0.00", currency: "USD" },
   }
 
-  // Use the stats object if it exists, otherwise use defaultStats
+  // Use provided stats or default
   const displayStats = stats || defaultStats
 
   return (
-    <div>
-      <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4 mb-4">
+    <div className="bg-[#F5F5F5] rounded-lg px-4">
+      {/* First row */}
path: app/profile/components/stats-grid.tsx
user: login: farrah-deriv
body: Please remove unnecessary comments.
created_at: 2025-04-17T05:25:04Z
author_association: COLLABORATOR
diff_hunk: @@ -65,17 +72,11 @@ export default function StatsGrid({ stats }: StatsGridProps) {
           title={`Sell completion ${displayStats.sellCompletion.period}`}
           value={displayStats.sellCompletion.rate}
         />
-        <StatCard title={`Avg. pay time ${displayStats.avgPayTime.period}`} value={displayStats.avgPayTime.time} />
-        <StatCard
-          title={`Avg. release time ${displayStats.avgReleaseTime.period}`}
-          value={displayStats.avgReleaseTime.time}
-        />
         <StatCard title="Trade partners" value={displayStats.tradePartners} hasInfo={true} />
       </div>
 
-      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-        <StatCard title={`Total orders ${displayStats.buyCompletion.period}`} value={displayStats.totalOrders30d} />
-        <StatCard title="Total orders (Lifetime)" value={displayStats.totalOrdersLifetime} />
+      {/* Second row */}
path: app/profile/components/stats-grid.tsx
user: login: farrah-deriv
body: Please remove unnecessary comments.
created_at: 2025-04-17T05:25:26Z
author_association: COLLABORATOR
diff_hunk: @@ -86,7 +87,19 @@ export default function StatsGrid({ stats }: StatsGridProps) {
           value={`${displayStats.tradeVolumeLifetime.currency} ${displayStats.tradeVolumeLifetime.amount}`}
           hasInfo={true}
         />
+        <StatCard title={`Avg. pay time ${displayStats.avgPayTime.period}`} value={displayStats.avgPayTime.time} />
+      </div>
+
+      {/* Third row */}
path: app/profile/components/stats-grid.tsx
user: login: farrah-deriv
body: Please remove unnecessary comments.
created_at: 2025-04-17T05:25:31Z
author_association: COLLABORATOR
diff_hunk: @@ -224,68 +223,90 @@ export default function StatsTabs({ children, stats: initialStats }: StatsTabsPr
         />
       )}
 
-      <Tabs defaultValue="stats" value={activeTab} onValueChange={setActiveTab} className="w-full">
-        <div className="flex justify-between items-center mb-6">
-          <TabsList className="bg-gray-100">
-            {tabs.map((tab) => (
-              <TabsTrigger
-                key={tab.id}
-                value={tab.id}
-                className="px-6 py-3 text-sm font-medium data-[state=active]:bg-white data-[state=active]:text-primary"
-              >
-                {tab.label}
-              </TabsTrigger>
-            ))}
-          </TabsList>
-
-          {activeTab === "payment" && (
-            <Button variant="primary" size="sm" onClick={() => setShowAddPaymentMethodPanel(true)}>
-              <PlusCircle className="mr-2 h-4 w-4" />
-              Add payment method
-            </Button>
-          )}
+      {/* Custom tabs component that matches the design */}
path: app/profile/components/stats-tabs.tsx
user: login: farrah-deriv
body: Please remove unnecessary comments.
created_at: 2025-04-17T05:26:10Z
author_association: COLLABORATOR
diff_hunk: @@ -224,68 +223,90 @@ export default function StatsTabs({ children, stats: initialStats }: StatsTabsPr
         />
       )}
 
-      <Tabs defaultValue="stats" value={activeTab} onValueChange={setActiveTab} className="w-full">
-        <div className="flex justify-between items-center mb-6">
-          <TabsList className="bg-gray-100">
-            {tabs.map((tab) => (
-              <TabsTrigger
-                key={tab.id}
-                value={tab.id}
-                className="px-6 py-3 text-sm font-medium data-[state=active]:bg-white data-[state=active]:text-primary"
-              >
-                {tab.label}
-              </TabsTrigger>
-            ))}
-          </TabsList>
-
-          {activeTab === "payment" && (
-            <Button variant="primary" size="sm" onClick={() => setShowAddPaymentMethodPanel(true)}>
-              <PlusCircle className="mr-2 h-4 w-4" />
-              Add payment method
-            </Button>
-          )}
+      {/* Custom tabs component that matches the design */}
+      <div className="mb-6">
+        <div className="inline-flex bg-[#F5F5F5] rounded-2xl p-1">
+          {tabs.map((tab) => (
+            <button
path: app/profile/components/stats-tabs.tsx
user: login: farrah-deriv
body: please use Tabs component
created_at: 2025-04-17T05:26:44Z
author_association: COLLABORATOR
diff_hunk: @@ -7,18 +7,70 @@ interface BusinessHoursProps {
 
 export default function BusinessHours({ isOpen, availability }: BusinessHoursProps) {
   return (
-    <div className="border rounded-lg p-4 mb-6">
+    <div className="border rounded-lg p-4">
path: components/profile/business-hours.tsx
user: login: farrah-deriv
body: can we hide Business Hours since it's not functional yet?
created_at: 2025-04-17T05:28:35Z
author_association: COLLABORATOR
diff_hunk: @@ -7,41 +10,81 @@ interface TradeLimitsProps {
     current: number
     max: number
   }
+  balance?: number
+  isLoading?: boolean // Add isLoading prop
path: components/profile/trade-limits.tsx
user: login: farrah-deriv
body: Please remove unnecessary comments.
created_at: 2025-04-17T05:29:36Z
author_association: COLLABORATOR
diff_hunk: @@ -3,42 +3,48 @@ import { Info } from "lucide-react"
 interface StatCardProps {
   title: string
   value: string | number
-  subtitle?: string
   hasInfo?: boolean
 }
 
-function StatCard({ title, value, subtitle, hasInfo = false }: StatCardProps) {
+function StatCard({ title, value, hasInfo = false }: StatCardProps) {
   return (
-    <div className="border rounded-lg p-4">
-      <div className="flex items-center text-sm text-gray-500 mb-1">
+    <div className="py-6">
+      <div
+        className="text-slate-500 mb-2 font-normal text-sm"
+        style={{ fontWeight: 400, fontSize: "14px", lineHeight: "20px", letterSpacing: "0%", verticalAlign: "middle" }}
path: app/profile/components/stats-grid.tsx
user: login: farrah-deriv
body: please use tailwindcss
created_at: 2025-04-17T08:27:31Z
author_association: COLLABORATOR
diff_hunk: @@ -3,42 +3,48 @@ import { Info } from "lucide-react"
 interface StatCardProps {
   title: string
   value: string | number
-  subtitle?: string
   hasInfo?: boolean
 }
 
-function StatCard({ title, value, subtitle, hasInfo = false }: StatCardProps) {
+function StatCard({ title, value, hasInfo = false }: StatCardProps) {
   return (
-    <div className="border rounded-lg p-4">
-      <div className="flex items-center text-sm text-gray-500 mb-1">
+    <div className="py-6">
+      <div
+        className="text-slate-500 mb-2 font-normal text-sm"
+        style={{ fontWeight: 400, fontSize: "14px", lineHeight: "20px", letterSpacing: "0%", verticalAlign: "middle" }}
+      >
         {title}
-        {hasInfo && <Info className="h-4 w-4 ml-1 text-gray-400" />}
+        {hasInfo && <Info className="inline-block h-3 w-3 ml-1 text-slate-400" />}
+      </div>
+      <div
+        className="font-bold text-black"
+        style={{ fontWeight: 700, fontSize: "16px", lineHeight: "24px", letterSpacing: "0%", verticalAlign: "middle" }}
path: app/profile/components/stats-grid.tsx
user: login: farrah-deriv
body: please use tailwindcss
created_at: 2025-04-17T08:27:34Z
author_association: COLLABORATOR
diff_hunk: @@ -119,23 +119,31 @@ export default function ProfilePage() {
     <div className="px-4 md:px-4">
       <Navigation title="P2P Wallet" />
 
-      <UserInfo
-        username={userData.username}
-        rating={userData.rating}
-        completionRate={userData.completionRate}
-        joinDate={userData.joinDate}
-        blockedCount={userData.blockedCount}
-        realName={userData.realName}
-        isVerified={userData.isVerified}
-      />
-
-      <div className="grid md:grid-cols-2 gap-6">
-        <BusinessHours isOpen={userData.businessHours.isOpen} availability={userData.businessHours.availability} />
-
-        <TradeLimits buyLimit={userData.tradeLimits.buy} sellLimit={userData.tradeLimits.sell} />
+      <div className="flex flex-col md:flex-row gap-6 h-full">
+        {/* Main content area with user info and stats tabs */}
path: app/profile/page.tsx
user: login: farrah-deriv
body: please remove this
created_at: 2025-04-17T08:30:43Z
author_association: COLLABORATOR
diff_hunk: @@ -119,23 +119,31 @@ export default function ProfilePage() {
     <div className="px-4 md:px-4">
       <Navigation title="P2P Wallet" />
 
-      <UserInfo
-        username={userData.username}
-        rating={userData.rating}
-        completionRate={userData.completionRate}
-        joinDate={userData.joinDate}
-        blockedCount={userData.blockedCount}
-        realName={userData.realName}
-        isVerified={userData.isVerified}
-      />
-
-      <div className="grid md:grid-cols-2 gap-6">
-        <BusinessHours isOpen={userData.businessHours.isOpen} availability={userData.businessHours.availability} />
-
-        <TradeLimits buyLimit={userData.tradeLimits.buy} sellLimit={userData.tradeLimits.sell} />
+      <div className="flex flex-col md:flex-row gap-6 h-full">
+        {/* Main content area with user info and stats tabs */}
+        <div className="flex-1 order-1">
+          <UserInfo
+            username={userData.username}
+            rating={userData.rating}
+            completionRate={userData.completionRate}
+            joinDate={userData.joinDate}
+            blockedCount={userData.blockedCount}
+            realName={userData.realName}
+            isVerified={userData.isVerified}
+          />
+          <StatsTabs stats={userData.stats} />
+        </div>
+
+        {/* Right sidebar with business hours and trade limits - updated to span full height */}
path: app/profile/page.tsx
user: login: farrah-deriv
body: please remove this
created_at: 2025-04-17T08:30:49Z
author_association: COLLABORATOR
diff_hunk: @@ -7,41 +10,81 @@ interface TradeLimitsProps {
     current: number
     max: number
   }
+  balance?: number
+  isLoading?: boolean
 }
 
-export default function TradeLimits({ buyLimit, sellLimit }: TradeLimitsProps) {
+// Update the function signature to include the isLoading parameter
+export default function TradeLimits({ buyLimit, sellLimit, balance = 0, isLoading = false }: TradeLimitsProps) {
   const buyPercentage = (buyLimit.current / buyLimit.max) * 100
   const sellPercentage = (sellLimit.current / sellLimit.max) * 100
 
   return (
-    <div className="border rounded-lg p-4 mb-6">
-      <h3 className="font-medium mb-4">Daily trade limit</h3>
-
-      <div className="grid grid-cols-2 gap-4">
-        <div>
-          <div className="flex items-center justify-between mb-1">
-            <span className="text-primary font-medium">Buy</span>
-            <span className="text-sm">
-              USD {buyLimit.current.toFixed(2)} / {buyLimit.max.toFixed(2)}
-            </span>
+    <div className="border rounded-lg p-4">
+      <div className="mb-6">
+        <div className="flex justify-between">
+          <div>
+            <h3
+              className="text-base font-normal mb-3"
+              style={{ lineHeight: "24px", letterSpacing: "0%", verticalAlign: "middle" }}
+            >
+              P2P Balance
+            </h3>
+            {isLoading ? (
+              <CustomShimmer className="h-8 w-32" />
+            ) : (
+              <div className="text-2xl font-extrabold" style={{ lineHeight: "32px", letterSpacing: "0%" }}>
+                USD {balance.toFixed(2)}
+              </div>
+            )}
           </div>
-          <div className="h-2 bg-gray-200 rounded-full overflow-hidden">
-            <div className="h-full bg-primary rounded-full" style={{ width: `${buyPercentage}%` }}></div>
+          <div className="flex flex-col justify-end">
+            <button className="bg-primary text-black font-bold py-2 px-6 rounded-full w-[124px] h-[48px]">
path: components/profile/trade-limits.tsx
user: login: farrah-deriv
body: Please use Button component
created_at: 2025-04-17T08:31:20Z
author_association: COLLABORATOR
diff_hunk: @@ -7,18 +7,34 @@ interface BusinessHoursProps {
 
 export default function BusinessHours({ isOpen, availability }: BusinessHoursProps) {
   return (
-    <div className="border rounded-lg p-4 mb-6">
+    <div className="border rounded-lg p-4">
       <div className="flex items-center justify-between mb-2">
         <div className="flex items-center">
-          <h3 className="font-medium">Business hours</h3>
-          <Info className="h-4 w-4 ml-1 text-gray-400" />
+          <h3 className="text-base font-normal leading-6 tracking-normal">Business hours</h3>
+          <Info className="h-3 w-3 ml-2 text-slate-400" />
         </div>
-        <button className="text-gray-500">
-          <Edit className="h-4 w-4" />
-        </button>
+        <div className="flex items-center">
+          <span className={`text-base font-bold leading-6 tracking-normal ${isOpen ? "text-success" : "text-error"}`}>
+            {isOpen ? "Open now" : "Closed"}
+          </span>
+          <button className="ml-2 text-slate-500">
+            <PenLine className="h-5 w-5" />
+          </button>
+        </div>
+      </div>
+
+      <div className="border-t my-4"></div>
+
+      <div className="flex items-center justify-between mt-6">
+        <div>
+          <h3 className="text-sm font-normal leading-5 tracking-normal">Show my real name</h3>
+          <p className="text-slate-500 text-xs font-normal leading-5 tracking-normal">Jonathan Nick Does</p>
+        </div>
+        <label className="relative inline-flex items-center cursor-pointer">
+          <input type="checkbox" value="" className="sr-only peer" defaultChecked />
path: components/profile/business-hours.tsx
user: login: farrah-deriv
body: Can use checkbox component for this.
created_at: 2025-04-17T10:58:06Z
author_association: COLLABORATOR
diff_hunk: @@ -7,38 +10,75 @@ interface TradeLimitsProps {
     current: number
     max: number
   }
+  balance?: number
+  isLoading?: boolean
+  userData?: any // Add userData prop to accept the API response
 }
 
-export default function TradeLimits({ buyLimit, sellLimit }: TradeLimitsProps) {
-  const buyPercentage = (buyLimit.current / buyLimit.max) * 100
-  const sellPercentage = (sellLimit.current / sellLimit.max) * 100
+export default function TradeLimits({
+  buyLimit,
+  sellLimit,
+  balance = 0,
+  isLoading = false,
+  userData, // Accept userData from parent component
+}: TradeLimitsProps) {
+  // Use API data if available, otherwise fall back to props
+  const userBalance = userData?.balances?.USD ?? balance
+  const buyMax = userData?.daily_limits?.buy ?? buyLimit.max
+  const buyRemaining = userData?.daily_limits_remaining?.buy ?? buyLimit.current
+  const sellMax = userData?.daily_limits?.sell ?? sellLimit.max
+  const sellRemaining = userData?.daily_limits_remaining?.sell ?? sellLimit.current
 
-  return (
-    <div className="border rounded-lg p-4 mb-6">
-      <h3 className="font-medium mb-4">Daily trade limit</h3>
+  // Calculate percentages based on API data if available
+  const buyPercentage = (buyRemaining / buyMax) * 100
+  const sellPercentage = (sellRemaining / sellMax) * 100
 
-      <div className="grid grid-cols-2 gap-4">
-        <div>
-          <div className="flex items-center justify-between mb-1">
-            <span className="text-primary font-medium">Buy</span>
-            <span className="text-sm">
-              USD {buyLimit.current.toFixed(2)} / {buyLimit.max.toFixed(2)}
-            </span>
+  return (
+    <div className="border rounded-lg p-4">
+      <div className="mb-6">
+        <div className="flex justify-between">
+          <div>
+            <h3 className="text-base font-normal mb-3 leading-6 tracking-normal">P2P Balance</h3>
+            {isLoading ? (
+              <CustomShimmer className="h-8 w-32" />
+            ) : (
+              <div className="text-2xl font-extrabold leading-8 tracking-normal">USD {userBalance.toFixed(2)}</div>
+            )}
           </div>
-          <div className="h-2 bg-gray-200 rounded-full overflow-hidden">
-            <div className="h-full bg-primary rounded-full" style={{ width: `${buyPercentage}%` }}></div>
+          <div className="flex flex-col justify-end">
+            <Button variant="cyan" size="pill" className="w-[124px] h-[48px] font-bold">
+              Transfer
+            </Button>
           </div>
         </div>
+      </div>
+
+      <div className="border-t pt-4">
+        <h3 className="text-base font-normal mb-3 leading-6 tracking-normal">Daily trade limit</h3>
 
-        <div>
-          <div className="flex items-center justify-between mb-1">
-            <span className="text-secondary font-medium">Sell</span>
-            <span className="text-sm">
-              USD {sellLimit.current.toFixed(2)} / {sellLimit.max.toFixed(2)}
-            </span>
+        <div className="space-y-4">
+          <div>
+            <div className="flex items-center justify-between mb-1">
+              <span className="text-buy font-bold text-sm leading-5 tracking-normal">Buy</span>
+              <span className="text-sm font-normal leading-5 tracking-normal">
+                USD {buyRemaining.toFixed(2)} / {buyMax.toFixed(2)}
+              </span>
+            </div>
+            <div className="h-2 bg-gray-200 rounded-full overflow-hidden">
+              <div className="h-full bg-black rounded-full" style={{ width: `${buyPercentage}%` }}></div>
path: components/profile/trade-limits.tsx
user: login: farrah-deriv
body: Please use tailwindcss. Let's not use inline styles.
created_at: 2025-04-17T10:59:55Z
author_association: COLLABORATOR

PR comments:
user: login: vercel[bot]
created_at: 2025-04-16T13:02:11Z
body: @ernest-deriv is attempting to deploy a commit to the **farrah-regentmarket's projects** Team on [Vercel](https://vercel.com).

A member of the Team first needs to [authorize it](https://vercel.com/git/authorize?team=farrah-regentmarket's%20projects&type=github&job=%7B%22headInfo%22%3A%7B%22sha%22%3A%2221d47567c10b383d54524ed74a93e01a5bbca582%22%7D%2C%22id%22%3A%22QmVdVDkvuyER2NXfpZezM3h4QUzjJH3wfv1eaXPiM559Kh%22%2C%22org%22%3A%22farrah-deriv%22%2C%22prId%22%3A41%2C%22repo%22%3A%22dp2p%22%7D).


author_association: CONTRIBUTOR
user: login: vercel[bot]
created_at: 2025-04-17T05:22:27Z
body: [vc]: #ylIzHzou0KQnnjFrphAdLKH1JxtqneJwCmHTs6/k8Ys=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiJ2MC1wMnAtYXBwbGljYXRpb24tZGVzaWduLWJmIiwicm9vdERpcmVjdG9yeSI6bnVsbCwiaW5zcGVjdG9yVXJsIjoiaHR0cHM6Ly92ZXJjZWwuY29tL2ZhcnJhaC1yZWdlbnRtYXJrZXRzLXByb2plY3RzL3YwLXAycC1hcHBsaWNhdGlvbi1kZXNpZ24tYmYva3lwYU5vWmVheXlBa1VBYmttZXZnQWkyRllNZiIsInByZXZpZXdVcmwiOiJ2MC1wMnAtYXBwbGljYXRpb24tZGVzLWdpdC03MGUwMTQtZmFycmFoLXJlZ2VudG1hcmtldHMtcHJvamVjdHMudmVyY2VsLmFwcCIsIm5leHRDb21taXRTdGF0dXMiOiJERVBMT1lFRCIsImxpdmVGZWVkYmFjayI6eyJyZXNvbHZlZCI6MCwidW5yZXNvbHZlZCI6MCwidG90YWwiOjAsImxpbmsiOiJ2MC1wMnAtYXBwbGljYXRpb24tZGVzLWdpdC03MGUwMTQtZmFycmFoLXJlZ2VudG1hcmtldHMtcHJvamVjdHMudmVyY2VsLmFwcCJ9fV19
**The latest updates on your projects**. Learn more about [Vercel for Git ↗︎](https://vercel.link/github-learn-more)

| Name | Status | Preview | Comments | Updated (UTC) |
| :--- | :----- | :------ | :------- | :------ |
| **v0-p2p-application-design-bf** | ✅ Ready ([Inspect](https://vercel.com/farrah-regentmarkets-projects/v0-p2p-application-design-bf/kypaNoZeayyAkUAbkmevgAi2FYMf)) | [Visit Preview](https://v0-p2p-application-des-git-70e014-farrah-regentmarkets-projects.vercel.app) | 💬 [**Add feedback**](https://vercel.live/open-feedback/v0-p2p-application-des-git-70e014-farrah-regentmarkets-projects.vercel.app?via=pr-comment-feedback-link) | Apr 17, 2025 5:23am |


author_association: CONTRIBUTOR