From e31a08df417420a3da04e801070c7f0885fee326 Mon Sep 17 00:00:00 2001 From: payacom <59262811+payacom@users.noreply.github.com> Date: Wed, 16 Sep 2026 16:31:08 +0330 Subject: [PATCH] Fix financial page mobile layout, restore shop-discover category chips, unify chip height MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - financial/page.tsx: the title+date and amount+status rows used a hard flex-col/flex-row breakpoint switch (sm:), so below 640px every row stacked into 4 separate lines instead of wrapping gracefully — now always flex-row with flex-wrap, min-w-0/shrink-0/truncate so long content wraps instead of the date/badge visually colliding - shops/discover/page.tsx: restored the real category chips (fetched from /shop-categories) alongside All/Pinterest — my earlier pass replaced the whole filter row with just those two, dropping the categories the page never actually had a chance to keep - buttonStyles.ts: btnFilterChip/btnFilterChipActive now have an explicit h-9 (matching toggleBtnClass, used right above them on the shop dashboard) instead of deriving height from padding alone, which made them visibly shorter than the buyer/seller toggle Co-Authored-By: Claude Sonnet 5 --- src/app/settings/financial/page.tsx | 16 ++--- src/app/shops/discover/page.tsx | 93 +++++++++++++++++++---------- src/lib/ui/buttonStyles.ts | 7 ++- 3 files changed, 76 insertions(+), 40 deletions(-) diff --git a/src/app/settings/financial/page.tsx b/src/app/settings/financial/page.tsx index 0b266a7..9d778a0 100644 --- a/src/app/settings/financial/page.tsx +++ b/src/app/settings/financial/page.tsx @@ -103,33 +103,33 @@ export default function Financial() { key={item._id} className="p-5 border rounded-3xl border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-800 shadow-sm hover:shadow-md transition-all duration-200" > -
-
+
+
{getTransactionType(item.type)} {item.project_title && ( - + ({item.project_title}) )}
-
+
{formatDate(item.createdAt)}
-
-
+
+
{t("settings.financial.amountPaid")}:{" "} {Number(item.amount).toLocaleString(amountLocale)}{" "} {t("settings.toman")}
-
+
{t("settings.status")}: diff --git a/src/app/shops/discover/page.tsx b/src/app/shops/discover/page.tsx index a710021..b1120eb 100644 --- a/src/app/shops/discover/page.tsx +++ b/src/app/shops/discover/page.tsx @@ -1,6 +1,6 @@ "use client"; -import { useState } from "react"; +import { useEffect, useMemo, useState } from "react"; import Container from "@/components/elements/Container"; import LocalePageShell from "@/components/i18n/LocalePageShell"; import PageTitle from "@/components/settings/PageTitle"; @@ -9,18 +9,46 @@ import TabNavigation from "@/components/TabNavigation"; import ShopProductGrid from "@/components/shops/ShopProductGrid"; import BoldIcon from "@/components/ui/BoldIcon"; import { cn } from "@/lib/utils"; +import useAxios from "@/hooks/useAxios"; import useInfiniteScroll from "@/hooks/useInfiniteScroll"; import { IShopProductListing } from "@/types/types"; import { useTranslation } from "react-i18next"; +const ALL_ID = "__all__"; +const PINTEREST_ID = "__pinterest__"; + +type ShopCategory = { category: string; sub_categories?: unknown[] }; + export default function ShopDiscoverPage() { const { t } = useTranslation("common"); - const [pinterestOnly, setPinterestOnly] = useState(false); + const { request } = useAxios(); + const [activeFilter, setActiveFilter] = useState(ALL_ID); + const [categories, setCategories] = useState([]); + + useEffect(() => { + request<{ categories?: ShopCategory[] }>("GET", "/shop-categories", null, { + noToast: true, + }) + .then((res) => + setCategories( + (res?.categories ?? []).map((c) => c.category).filter(Boolean) + ) + ) + .catch(() => setCategories([])); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + + const chips = useMemo(() => [ALL_ID, PINTEREST_ID, ...categories], [categories]); const { data, isLoading } = useInfiniteScroll({ endpoint: "/shop-products/discover", - queryKey: ["shop-products-discover", String(pinterestOnly)], - params: pinterestOnly ? { pinterest: "true" } : {}, + queryKey: ["shop-products-discover", activeFilter], + params: + activeFilter === PINTEREST_ID + ? { pinterest: "true" } + : activeFilter === ALL_ID + ? {} + : { category: activeFilter }, }); const listings: IShopProductListing[] = @@ -33,32 +61,37 @@ export default function ShopDiscoverPage() { {t("shops.discoverTitle")} -
- - +
+ {chips.map((c) => { + const active = activeFilter === c; + const isPinterest = c === PINTEREST_ID; + const label = + c === ALL_ID + ? t("shops.allFilter") + : isPinterest + ? t("shops.pinterestFilter") + : c; + return ( + + ); + })}