feat: complete all borrow features, consolidate supply + borrow modal style

app/market/[chainId]/[marketid]/RateChart.tsx

@@ -120,7 +120,7 @@ function RateChart({
   );
 
   return (
-    <Card className="bg-surface my-4 rounded-md p-4 shadow-sm">
+    <Card className="bg-surface my-4 rounded p-4 shadow-sm">
       <CardHeader className="flex items-center justify-between px-6 py-4 text-xl">
         <span />
         <ButtonGroup

app/market/[chainId]/[marketid]/VolumeChart.tsx

@@ -181,7 +181,7 @@ function VolumeChart({
   });
 
   return (
-    <Card className="bg-surface my-4 rounded-md p-4 shadow-sm">
+    <Card className="bg-surface my-4 rounded p-4 shadow-sm">
       <CardHeader className="flex items-center justify-between px-6 py-4 text-xl">
         <span />
         <div className="flex gap-4">

app/market/[chainId]/[marketid]/components/BorrowsTable.tsx

@@ -53,7 +53,7 @@ export function BorrowsTable({ chainId, market }: BorrowsTableProps) {
         key={tableKey}
         aria-label="Borrow and repay activities"
         classNames={{
-          wrapper: 'bg-surface shadow-sm',
+          wrapper: 'bg-surface shadow-sm rounded',
           table: 'bg-surface',
         }}
         bottomContent={

app/market/[chainId]/[marketid]/components/LiquidationsTable.tsx

@@ -51,7 +51,7 @@ export function LiquidationsTable({ chainId, market }: LiquidationsTableProps) {
         key={tableKey}
         aria-label="Liquidations history"
         classNames={{
-          wrapper: 'bg-surface shadow-sm',
+          wrapper: 'bg-surface shadow-sm rounded',
           table: 'bg-surface',
         }}
         bottomContent={

app/market/[chainId]/[marketid]/components/PositionStats.tsx

@@ -0,0 +1,198 @@
+import { useState } from 'react';
+import { Card } from '@nextui-org/card';
+import { Switch } from '@nextui-org/switch';
+import { FiUser } from "react-icons/fi";
+import { HiOutlineGlobeAsiaAustralia } from "react-icons/hi2";
+import { Spinner } from '@/components/common/Spinner';
+import { TokenIcon } from '@/components/TokenIcon';
+import { formatBalance, formatReadable } from '@/utils/balance';
+import { Market, MarketPosition } from '@/utils/types';
+
+type PositionStatsProps = {
+  market: Market;
+  userPosition: MarketPosition | null;
+  positionLoading: boolean;
+  cardStyle: string;
+}
+
+function ThumbIcon({ isSelected, className }: { isSelected: boolean; className?: string }) {
+  return isSelected ? <FiUser className={className} /> : <HiOutlineGlobeAsiaAustralia className={className} />;
+}
+
+export function PositionStats({ market, userPosition, positionLoading, cardStyle }: PositionStatsProps) {
+  // Default to user view if they have a position, otherwise global
+  const [viewMode, setViewMode] = useState<'global' | 'user'>(userPosition ? 'user' : 'global');
+
+  const toggleView = () => {
+    setViewMode(prev => prev === 'global' ? 'user' : 'global');
+  };
+
+  const renderStats = () => {
+    if (viewMode === 'user') {
+      if (positionLoading) {
+        return (
+          <div className="flex justify-center">
+            <Spinner size={24} />
+          </div>
+        );
+      }
+
+      if (!userPosition) {
+        return <div className="text-center text-gray-500">No active position</div>;
+      }
+
+      return (
+        <div className="space-y-2">
+          <div className="flex items-center justify-between">
+            <span>Supply:</span>
+            <div className="flex items-center gap-2">
+              <TokenIcon
+                address={market.loanAsset.address}
+                chainId={market.morphoBlue.chain.id}
+                symbol={market.loanAsset.symbol}
+                width={16}
+                height={16}
+              />
+              <span>
+                {formatBalance(
+                  BigInt(userPosition.state.supplyAssets || 0),
+                  market.loanAsset.decimals,
+                ).toString()}{' '}
+                {market.loanAsset.symbol}
+              </span>
+            </div>
+          </div>
+          <div className="flex items-center justify-between">
+            <span>Borrow:</span>
+            <div className="flex items-center gap-2">
+              <TokenIcon
+                address={market.loanAsset.address}
+                chainId={market.morphoBlue.chain.id}
+                symbol={market.loanAsset.symbol}
+                width={16}
+                height={16}
+              />
+              <span>
+                {formatBalance(
+                  BigInt(userPosition.state.borrowAssets || 0),
+                  market.loanAsset.decimals,
+                ).toString()}{' '}
+                {market.loanAsset.symbol}
+              </span>
+            </div>
+          </div>
+          <div className="flex items-center justify-between">
+            <span>Collateral:</span>
+            <div className="flex items-center gap-2">
+              <TokenIcon
+                address={market.collateralAsset.address}
+                chainId={market.morphoBlue.chain.id}
+                symbol={market.collateralAsset.symbol}
+                width={16}
+                height={16}
+              />
+              <span>
+                {formatBalance(
+                  BigInt(userPosition.state.collateral || 0),
+                  market.collateralAsset.decimals,
+                ).toString()}{' '}
+                {market.collateralAsset.symbol}
+              </span>
+            </div>
+          </div>
+        </div>
+      );
+    }
+
+    // Global stats
+    return (
+      <div className="space-y-2">
+        <div className="flex items-center justify-between">
+          <span>Total Supply:</span>
+          <div className="flex items-center gap-2">
+            <TokenIcon
+              address={market.loanAsset.address}
+              chainId={market.morphoBlue.chain.id}
+              symbol={market.loanAsset.symbol}
+              width={16}
+              height={16}
+            />
+            <span>
+              {formatReadable(
+                formatBalance(
+                  BigInt(market.state.supplyAssets || 0),
+                  market.loanAsset.decimals,
+                ).toString()
+              )}{' '}
+              {market.loanAsset.symbol}
+            </span>
+          </div>
+        </div>
+        <div className="flex items-center justify-between">
+          <span>Total Borrow:</span>
+          <div className="flex items-center gap-2">
+            <TokenIcon
+              address={market.loanAsset.address}
+              chainId={market.morphoBlue.chain.id}
+              symbol={market.loanAsset.symbol}
+              width={16}
+              height={16}
+            />
+            <span>
+              {formatReadable(
+                formatBalance(
+                  BigInt(market.state.borrowAssets || 0),
+                  market.loanAsset.decimals,
+                ).toString()
+              )}{' '}
+              {market.loanAsset.symbol}
+            </span>
+          </div>
+        </div>
+        <div className="flex items-center justify-between">
+          <span>Total Collateral:</span>
+          <div className="flex items-center gap-2">
+            <TokenIcon
+              address={market.collateralAsset.address}
+              chainId={market.morphoBlue.chain.id}
+              symbol={market.collateralAsset.symbol}
+              width={16}
+              height={16}
+            />
+            <span>
+              {formatReadable(
+                formatBalance(
+                  BigInt(market.state.collateralAssets || 0),
+                  market.collateralAsset.decimals,
+                ).toString()
+              )}{' '}
+              {market.collateralAsset.symbol}
+            </span>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <Card className={cardStyle}>
+      <div className="flex items-center justify-between p-4 py-3">
+        <span className="text-xl">{viewMode === 'global' ? 'Global Stats' : 'Your Position'}</span>
+        <Switch
+          defaultSelected={viewMode === 'user'}
+          size="sm"
+          color="primary"
+          classNames={{
+            wrapper: 'mx-0',
+            thumbIcon: 'p-0 mr-0'
+          }}
+          onChange={toggleView}
+          thumbIcon={ThumbIcon}
+        />
+      </div>
+      <div className="px-4 py-3">
+        {renderStats()}
+      </div>
+    </Card>
+  );
+} 

app/market/[chainId]/[marketid]/components/SuppliesTable.tsx

@@ -52,7 +52,7 @@ export function SuppliesTable({ chainId, market }: SuppliesTableProps) {
       <Table
         key={tableKey}
         classNames={{
-          wrapper: 'bg-surface shadow-sm',
+          wrapper: 'bg-surface shadow-sm rounded',
           table: 'bg-surface',
         }}
         aria-label="Supply and withdraw activities"