clean(lme): remove previous/next navigation buttons from timeframe bar

frontend/src/components/LmeView.tsx

@@ -123,7 +123,6 @@ export function LmeView() {
   const [diagramData, setDiagramData] = useState<DiagramResponse | null>(null);
   const [diagramLoading, setDiagramLoading] = useState<boolean>(false);
   const [timeframe, setTimeframe] = useState<Timeframe>("ENTIRE");
-  const [offsetIndex, setOffsetIndex] = useState<number>(0);
 
   // Visibility toggles for dual-series charts
   const [showPrice, setShowPrice] = useState<boolean>(true);
@@ -157,7 +156,6 @@ export function LmeView() {
 
     let alive = true;
     setDiagramLoading(true);
-    setOffsetIndex(0);
     setShowPrice(true);
     setShowStocks(true);
 
@@ -199,7 +197,7 @@ export function LmeView() {
     return diagramData?.lines?.find((l) => l.series_type === "stocks");
   }, [diagramData]);
 
-  // Filter main series by timeframe & offset
+  // Filter main series by timeframe
   const chartData = useMemo(() => {
     if (!diagramData?.lines?.length) return [];
     const baseLine = priceLine || diagramData.lines[0];
@@ -213,12 +211,8 @@ export function LmeView() {
     else if (timeframe === "2Y") sliceCount = 520;
     else if (timeframe === "ENTIRE") sliceCount = total;
 
-    const maxOffset = Math.max(0, total - sliceCount);
+    const start = Math.max(0, total - sliceCount);
-    const effectiveOffset = Math.min(offsetIndex, maxOffset);
+    const windowPoints = baseLine.points.slice(start);
-    const end = total - effectiveOffset;
-    const start = Math.max(0, end - sliceCount);
-
-    const windowPoints = baseLine.points.slice(start, end);
 
     if (stockLine) {
       const stockMap = new Map(stockLine.points.map((p) => [p.x, p.y]));
@@ -235,7 +229,7 @@ export function LmeView() {
       date_display: p.date_display,
       priceVal: p.y,
     }));
-  }, [diagramData, priceLine, stockLine, timeframe, offsetIndex]);
+  }, [diagramData, priceLine, stockLine, timeframe]);
 
   // Statistics calculation for the active window
   const stats = useMemo(() => {
@@ -256,26 +250,6 @@ export function LmeView() {
     return { max, min, avg, diff, pct, first, last };
   }, [chartData]);
 
-  const canStepPrev = useMemo(() => {
-    if (timeframe === "ENTIRE") return false;
-    const total = (priceLine || diagramData?.lines?.[0])?.points?.length || 0;
-    const count = timeframe === "3M" ? 65 : timeframe === "6M" ? 130 : timeframe === "1Y" ? 260 : 520;
-    return offsetIndex + count < total;
-  }, [timeframe, priceLine, diagramData, offsetIndex]);
-
-  const canStepNext = useMemo(() => {
-    return offsetIndex > 0 && timeframe !== "ENTIRE";
-  }, [offsetIndex, timeframe]);
-
-  const stepWindow = (dir: "prev" | "next") => {
-    const step = timeframe === "3M" ? 22 : timeframe === "6M" ? 45 : timeframe === "1Y" ? 65 : 130;
-    if (dir === "prev") {
-      setOffsetIndex((prev) => prev + step);
-    } else {
-      setOffsetIndex((prev) => Math.max(0, prev - step));
-    }
-  };
-
   const filteredMetals = useMemo(() => {
     if (!data?.metals) return [];
     if (!search.trim()) return data.metals;
@@ -569,7 +543,9 @@ export function LmeView() {
             {/* Header */}
             <div className="flex items-start justify-between border-b border-border/60 pb-4">
               <div className="flex items-center gap-3">
-                <div className="w-12 h-12 rounded-2xl grid place-items-center border shrink-0 bg-primary/10 border-primary/30">
+                <div
+                  className="w-12 h-12 rounded-2xl grid place-items-center border shrink-0 bg-primary/10 border-primary/30"
+                >
                   <LineChartIcon className="w-6 h-6 text-primary" />
                 </div>
                 <div>
@@ -636,7 +612,7 @@ export function LmeView() {
               <div className="flex flex-wrap items-center justify-between gap-3 border-b border-border/40 pb-3">
                 <div className="flex items-center gap-2">
                   <span className="text-xs font-semibold text-foreground">راهنمای رنگ‌ها:</span>
-                  
+
                   {/* Price Line Toggle */}
                   {priceLine && (
                     <button
@@ -726,7 +702,7 @@ export function LmeView() {
                         hide={!showPrice}
                       />
 
-                      {/* Left Y-Axis for Warehouse Stocks (Scaled properly!) */}
+                      {/* Left Y-Axis for Warehouse Stocks */}
                       {stockLine && (
                         <YAxis
                           yAxisId="stocks"
@@ -794,7 +770,7 @@ export function LmeView() {
                         />
                       )}
 
-                      {/* Stock Curve (Mapped to Left Y-Axis!) */}
+                      {/* Stock Curve (Mapped to Left Y-Axis) */}
                       {showStocks && stockLine && (
                         <Line
                           yAxisId="stocks"
@@ -811,25 +787,12 @@ export function LmeView() {
                 </div>
               )}
 
-              {/* TIMEFRAME BAR (100% Persian) */}
+              {/* TIMEFRAME BAR (Clean pills without قبلی / بعدی) */}
               <div className="pt-3 border-t border-border/40 flex flex-wrap items-center justify-center gap-2" dir="rtl">
-                {/* Step Backwards */}
-                <button
-                  onClick={() => stepWindow("prev")}
-                  disabled={!canStepPrev}
-                  className="rounded-xl border border-border/80 bg-background/80 px-3 py-1.5 text-xs text-foreground transition hover:bg-accent disabled:opacity-30 disabled:cursor-not-allowed"
-                  title="نمایش داده‌های قدیمی‌تر"
-                >
-                  &gt; قبلی
-                </button>
-
                 {/* 3 months */}
                 <button
-                  onClick={() => {
+                  onClick={() => setTimeframe("3M")}
-                    setTimeframe("3M");
+                  className={`rounded-xl border px-4 py-1.5 text-xs font-semibold transition ${
-                    setOffsetIndex(0);
-                  }}
-                  className={`rounded-xl border px-3.5 py-1.5 text-xs font-semibold transition ${
                     timeframe === "3M"
                       ? "border-primary bg-primary text-primary-foreground shadow-sm"
                       : "border-border/80 bg-background/80 text-muted-foreground hover:text-foreground hover:bg-accent"
@@ -840,11 +803,8 @@ export function LmeView() {
 
                 {/* 6 months */}
                 <button
-                  onClick={() => {
+                  onClick={() => setTimeframe("6M")}
-                    setTimeframe("6M");
+                  className={`rounded-xl border px-4 py-1.5 text-xs font-semibold transition ${
-                    setOffsetIndex(0);
-                  }}
-                  className={`rounded-xl border px-3.5 py-1.5 text-xs font-semibold transition ${
                     timeframe === "6M"
                       ? "border-primary bg-primary text-primary-foreground shadow-sm"
                       : "border-border/80 bg-background/80 text-muted-foreground hover:text-foreground hover:bg-accent"
@@ -855,11 +815,8 @@ export function LmeView() {
 
                 {/* 1 year */}
                 <button
-                  onClick={() => {
+                  onClick={() => setTimeframe("1Y")}
-                    setTimeframe("1Y");
+                  className={`rounded-xl border px-4 py-1.5 text-xs font-semibold transition ${
-                    setOffsetIndex(0);
-                  }}
-                  className={`rounded-xl border px-3.5 py-1.5 text-xs font-semibold transition ${
                     timeframe === "1Y"
                       ? "border-primary bg-primary text-primary-foreground shadow-sm"
                       : "border-border/80 bg-background/80 text-muted-foreground hover:text-foreground hover:bg-accent"
@@ -870,11 +827,8 @@ export function LmeView() {
 
                 {/* 2 year */}
                 <button
-                  onClick={() => {
+                  onClick={() => setTimeframe("2Y")}
-                    setTimeframe("2Y");
+                  className={`rounded-xl border px-4 py-1.5 text-xs font-semibold transition ${
-                    setOffsetIndex(0);
-                  }}
-                  className={`rounded-xl border px-3.5 py-1.5 text-xs font-semibold transition ${
                     timeframe === "2Y"
                       ? "border-primary bg-primary text-primary-foreground shadow-sm"
                       : "border-border/80 bg-background/80 text-muted-foreground hover:text-foreground hover:bg-accent"
@@ -885,11 +839,8 @@ export function LmeView() {
 
                 {/* entire data (ACTIVE HIGHLIGHT) */}
                 <button
-                  onClick={() => {
+                  onClick={() => setTimeframe("ENTIRE")}
-                    setTimeframe("ENTIRE");
+                  className={`rounded-xl border px-5 py-1.5 text-xs font-bold transition ${
-                    setOffsetIndex(0);
-                  }}
-                  className={`rounded-xl border px-4 py-1.5 text-xs font-bold transition ${
                     timeframe === "ENTIRE"
                       ? "border-primary bg-primary text-primary-foreground shadow-md ring-2 ring-primary/20"
                       : "border-border/80 bg-background/80 text-muted-foreground hover:text-foreground hover:bg-accent"
@@ -897,16 +848,6 @@ export function LmeView() {
                 >
                   کل داده‌ها (تاریخچه کامل)
                 </button>
-
-                {/* Step Forwards */}
-                <button
-                  onClick={() => stepWindow("next")}
-                  disabled={!canStepNext}
-                  className="rounded-xl border border-border/80 bg-background/80 px-3 py-1.5 text-xs text-foreground transition hover:bg-accent disabled:opacity-30 disabled:cursor-not-allowed"
-                  title="نمایش داده‌های جدیدتر"
-                >
-                  بعدی &lt;
-                </button>
               </div>
             </div>
           </div>