Vitron-Front/app/routes/store.$storeId.financial-dashboard._index.tsx

import type { MetaFunction } from "@remix-run/node";
import { useNavigate, useParams } from "@remix-run/react";
import { safeGoBack } from "~/utils/helpers";
import {
  ArrowLeftRight,
  ChartNoAxesCombined,
  ChevronLeft,
  HandCoins,
} from "lucide-react";
import HeaderWithSupport from "../components/HeaderWithSupport";

export const meta: MetaFunction = () => {
  return [
    { title: "داشبورد مالی - ویترون" },
    {
      name: "description",
      content:
        "مدیریت امور مالی فروشگاه شما در ویترون. برداشت وجه، گزارش مالی و پیگیری تراکنش‌ها.",
    },
    {
      name: "keywords",
      content: "داشبورد مالی، برداشت وجه، گزارش مالی، تراکنش، فروشگاه، ویترون",
    },
    { name: "robots", content: "noindex, follow" },
    { property: "og:title", content: "داشبورد مالی - ویترون" },
    {
      property: "og:description",
      content:
        "مدیریت امور مالی فروشگاه شما در ویترون. برداشت وجه، گزارش مالی و پیگیری تراکنش‌ها.",
    },
    { property: "og:type", content: "website" },
    { name: "twitter:card", content: "summary" },
    { name: "twitter:title", content: "داشبورد مالی - ویترون" },
    {
      name: "twitter:description",
      content:
        "مدیریت امور مالی فروشگاه شما در ویترون. برداشت وجه، گزارش مالی و پیگیری تراکنش‌ها.",
    },
  ];
};

export default function FinancialDashboard() {
  const { storeId } = useParams();
  const navigate = useNavigate();
  const handleBack = () => {
    safeGoBack(navigate);
  };
  const cashFunds = (link: string) => {
    navigate(link);
  };
  const menuItems = [
    {
      link: `/store/${storeId}/financial-dashboard/cash-funds`,
      title: "برداشت وجه",
      description: "مدیریت موجودی و درخواست انتقال درآمد به حساب بانکی.",
      icon: <HandCoins size={20} />,
    },
    {
      link: `/store/${storeId}/financial-dashboard/transactions`,
      title: "لیست تراکنش‌ها",
      description: "مشاهده و پیگیری تمام تراکنش‌ها.",
      icon: <ArrowLeftRight size={20} />,
    },
    {
      link: `/store/${storeId}/financial-dashboard/reports`,
      title: "گزارش مالی",
      description: "دریافت گزارش‌های خلاصه یا تفصیلی از عملکرد مالی فروشگاه.",
      icon: <ChartNoAxesCombined size={20} />,
    },
  ];
  return (
    <div className="bg-WHITE">
      <HeaderWithSupport title="داشبورد مالی" onBack={handleBack} />
      {menuItems.map((item, index) => (
        <div
          onClick={() => {
            cashFunds(item.link);
          }}
          role="button"
          key={index}
          tabIndex={0}
          onKeyDown={(e) => {
            if (e.key === "Enter") {
              cashFunds(item.link);
            }
          }}
          className="border-b flex items-center w-full p-4 bg-WHITE hover:bg-WHITE3 cursor-pointer"
        >
          <div className="flex flex-col w-full gap-2">
            <div className="flex flex-row w-full gap-2">
              {item.icon}
              <p className="text-R14 font-bold">{item.title}</p>
            </div>
            <p className="text-R12">{item.description}</p>
          </div>
          <ChevronLeft size={16} />
        </div>
      ))}
    </div>
  );
}