complete score page - complete transition for pages

package-lock.json

@@ -22,6 +22,7 @@
         "@types/react-dom": "^18.3.0",
         "axios": "^1.7.3",
         "clsx": "^2.1.1",
+        "framer-motion": "^11.3.28",
         "iconsax-react": "^0.0.8",
         "iranianbanklogos": "^3.1.2",
         "moment-jalaali": "^0.10.1",
@@ -9678,6 +9679,31 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "11.3.28",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.3.28.tgz",
+      "integrity": "sha512-dqhoawipEAjqdv32zbv72sOMJZjol7dROWn7t/FOq23WXJ40O4OUybgnO2ldnuS+3YquSn8xO/KKRavZ+TBVOQ==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fresh": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",

package.json

@@ -17,6 +17,7 @@
     "@types/react-dom": "^18.3.0",
     "axios": "^1.7.3",
     "clsx": "^2.1.1",
+    "framer-motion": "^11.3.28",
     "iconsax-react": "^0.0.8",
     "iranianbanklogos": "^3.1.2",
     "moment-jalaali": "^0.10.1",

src/App.tsx

@@ -1,12 +1,15 @@
 import { Imei } from "./components/home/imei";
 import { StatusBox } from "./components/home/status-box";
+import { TransitionPages } from "./transition";
 
 function App() {
   return (
+    <TransitionPages>
       <div className="flex flex-col gap-y-[30px] w-full">
         <StatusBox />
         <Imei />
       </div>
+    </TransitionPages>
   );
 }
 

src/components/awards/award-skeleton.tsx

@@ -0,0 +1,18 @@
+export const AwardSkeleton = () => {
+    return <div className="grid grid-cols-1 sm:grid-cols-2 2xl:grid-cols-4 gap-6 animate-pulse">
+        <div className="w-full bg-auth-form p-[18px] h-full rounded-[40px] flex flex-col gap-[42px] min-h-[220px]">
+            <div className="size-16 bg-secondary-color flex justify-center rounded-full items-center"></div>
+            <div className="flex flex-col gap-8">
+                <div className="flex flex-col gap-3 w-32 h-2 bg-secondary-color rounded-full"></div>
+                <div className="flex flex-col gap-3 w-20 h-2 bg-secondary-color rounded-full"></div>
+            </div>
+        </div>
+        <div className="w-full bg-auth-form p-[18px] h-full rounded-[40px] flex flex-col gap-[42px] min-h-[220px]">
+            <div className="size-16 bg-secondary-color flex justify-center rounded-full items-center"></div>
+            <div className="flex flex-col gap-8">
+                <div className="flex flex-col gap-3 w-32 h-2 bg-secondary-color rounded-full"></div>
+                <div className="flex flex-col gap-3 w-20 h-2 bg-secondary-color rounded-full"></div>
+            </div>
+        </div>
+    </div>
+}

src/components/awards/index.tsx

@@ -2,6 +2,7 @@ import { useQuery } from "@tanstack/react-query"
 import { AwardNotComplete } from "./award-not-complete"
 import { getAwardsList } from "../../services/api/awards"
 import { AwardsResponse } from "../../types"
+import { AwardSkeleton } from "./award-skeleton"
 
 export const Awards = () => {
     const { data, isLoading } = useQuery({
@@ -9,7 +10,7 @@ export const Awards = () => {
         queryFn: getAwardsList
     })
 
-    if (isLoading) return <p>LOADING...</p>
+    if (isLoading) return <AwardSkeleton />
     return (
         <div className="flex flex-col gap-10">
             <div className="flex flex-row justify-between items-center">

src/components/score/index.tsx

@@ -12,6 +12,6 @@ export const Score = () => {
         queryFn: getScoresList
     })
     return (
-        <Table sorting={sorting} setSorting={setSorting} columns={scoresCol} data={data?.data} tableStatus={data?.score} isLoading={isLoading} />
+        <Table sorting={sorting} setSorting={setSorting} columns={scoresCol} data={data?.data?.data} tableStatus={data?.score} isLoading={isLoading} />
     )
 }

src/components/ui/auth/layout.tsx

@@ -4,12 +4,11 @@ import { SocialsInterface } from "../../../types"
 
 export const AuthLayout = () => {
     return (
-        <section
+        <>
-            className="flex flex-row min-h-screen p-5 justify-center items-center xl:justify-stretch xl:items-stretch max-h-[750px] overflow-y-hidden relative">
             <Outlet />
             <footer className="hidden w-full xl:flex flex-row gap-x-2 justify-end !absolute left-4 bottom-4">
                 {socialsList?.map((item: SocialsInterface) => <img key={item?.name} src={item?.path} alt={item?.name} className="size-10 min-w-10 min-h-10 cursor-pointer" />)}
             </footer>
-        </section>
+        </>
     )
 }

src/components/wallet/wallet-skeleton.tsx

@@ -1,5 +1,5 @@
 export const WalletStatusSkeleton = () => {
-    return <div className="grid grid-cols-1 sm:grid-cols-2 2xl:grid-cols-4 gap-6 animate-pulse">
+    return <div className="grid grid-cols-1 sm:grid-cols-2 gap-6 animate-pulse">
         <div className="w-full bg-auth-form p-[18px] h-full rounded-[40px] flex flex-col gap-[42px] min-h-[220px]">
             <div className="size-16 bg-secondary-color flex justify-center rounded-full items-center"></div>
             <div className="flex flex-col gap-8">

src/pages/auth/forgot-password.tsx

@@ -1,12 +1,13 @@
 import { ForgotPasswordForm } from "../../components/forms/forgot-password-form"
+import { AuthTransitionPages } from "../../transition/auth-transition"
 
 export const ForgotPassword = () => {
     return (
-        <>
+        <AuthTransitionPages>
             <ForgotPasswordForm />
             <div className="hidden xl:flex w-1/2 h-screen justify-center items-center">
                 <img src="/svgs/auth/forgot-password.svg" alt="forgot password" className="auth-image-desktop" />
             </div>
-        </>
+        </AuthTransitionPages>
     )
 }

src/pages/auth/login-with-code.tsx

@@ -1,12 +1,13 @@
 import { LoginWithCodeForm } from "../../components/forms/login-with-code-form"
+import { AuthTransitionPages } from "../../transition/auth-transition"
 
 export const LoginWithCode = () => {
     return (
-        <>
+        <AuthTransitionPages>
             <LoginWithCodeForm />
             <div className="hidden xl:flex w-1/2 h-screen justify-center items-center">
                 <img src="/svgs/auth/login-with-code.svg" alt="login with code" className="auth-image-desktop" />
             </div>
-        </>
+        </AuthTransitionPages>
     )
 }

src/pages/auth/login.tsx

@@ -1,13 +1,14 @@
 
 import { LoginForm } from "../../components/forms/login-form"
+import { AuthTransitionPages } from "../../transition/auth-transition"
 
 export const Login = () => {
     return (
-        <>
+        <AuthTransitionPages>
             <LoginForm />
             <div className="hidden xl:flex w-1/2 h-screen justify-center items-center">
                 <img src="/svgs/auth/login.svg" alt="login" className="auth-image-desktop" />
             </div>
-        </>
+        </AuthTransitionPages>
     )
 }

src/pages/auth/register.tsx

@@ -1,12 +1,13 @@
 import { RegisterForm } from "../../components/forms/register-form"
+import { AuthTransitionPages } from "../../transition/auth-transition"
 
 export const Register = () => {
     return (
-        <>
+        <AuthTransitionPages>
             <RegisterForm />
             <div className="hidden xl:flex w-1/2 h-screen justify-center items-center">
                 <img src="/svgs/auth/register.svg" alt="register" className="auth-image-desktop" />
             </div>
-        </>
+        </AuthTransitionPages>
     )
 }

src/pages/auth/reset-password-code.tsx

@@ -1,14 +1,14 @@
-import React from "react"
 import { ResetpasswordCodeForm } from "../../components/forms/reset-password-code-form"
+import { AuthTransitionPages } from "../../transition/auth-transition"
 
 
 export const ResetPasswordCode = () => {
     return (
-        <React.Fragment>
+        <AuthTransitionPages>
             <ResetpasswordCodeForm />
             <div className="hidden xl:flex w-1/2 h-screen justify-center items-center">
                 <img src="/svgs/auth/reset-password-code.svg" alt="send code reset password" className="auth-image-desktop" />
             </div>
-        </React.Fragment>
+        </AuthTransitionPages>
     )
 }

src/pages/auth/reset-password.tsx

@@ -1,13 +1,13 @@
-import React from "react"
 import { ResetPasswordForm } from "../../components/forms/reset-password.form"
+import { AuthTransitionPages } from "../../transition/auth-transition"
 
 export const ResetPassword = () => {
     return (
-        <React.Fragment>
+        <AuthTransitionPages>
             <ResetPasswordForm />
             <div className="hidden xl:flex w-1/2 h-screen justify-center items-center">
                 <img src="/svgs/auth/reset-password.svg" alt="reset password" className="auth-image-desktop" />
             </div>
-        </React.Fragment>
+        </AuthTransitionPages>
     )
 }

src/pages/auth/send-code.tsx

@@ -1,13 +1,14 @@
-import React from "react"
+
 import { SendCodeForm } from "../../components/forms/send-code-form"
+import { AuthTransitionPages } from "../../transition/auth-transition"
 
 export const SendCode = () => {
     return (
-        <React.Fragment>
+              <AuthTransitionPages>
             <SendCodeForm />
             <div className="hidden xl:flex w-1/2 h-screen justify-center items-center">
                 <img src="/svgs/auth/send-code.svg" alt="send code" className="auth-image-desktop" />
             </div>
-        </React.Fragment>
+         </AuthTransitionPages>
     )
 }

src/pages/dashboard/awards.tsx

@@ -1,7 +1,10 @@
 import { Awards } from "../../components/awards"
+import { TransitionPages } from "../../transition"
 
 export const AwardsPage = () => {
     return (
+        <TransitionPages>
             <Awards />
+        </TransitionPages>
     )
 }

src/pages/dashboard/installation-reports.tsx

@@ -1,7 +1,10 @@
 import { InstallationReports } from "../../components/installation-reports"
+import { TransitionPages } from "../../transition"
 
 export const InstallationReportsPage = () => {
     return (
+        <TransitionPages>
             <InstallationReports />
+        </TransitionPages>
     )
 }

src/pages/dashboard/management-bank-account.tsx

@@ -1,7 +1,10 @@
 import { ManagementBankAccounts } from "../../components/management-bank-accounts"
+import { TransitionPages } from "../../transition"
 
 export const ManagementBankAccountPage = () => {
     return (
+        <TransitionPages>
             <ManagementBankAccounts />
+        </TransitionPages>
     )
 }

src/pages/dashboard/my-account.tsx

@@ -1,7 +1,11 @@
 import { MyAccountPage } from "../../components/my-account"
+import { TransitionPages } from "../../transition"
 
 export const MyAcccount = () => {
     return (
+        <TransitionPages>
             <MyAccountPage />
+        </TransitionPages>
+
     )
 }

src/pages/dashboard/score.tsx

@@ -1,7 +1,10 @@
 import { Score } from "../../components/score"
+import { TransitionPages } from "../../transition"
 
 export const ScorePage = () => {
     return (
+        <TransitionPages>
             <Score />
+        </TransitionPages>
     )
 }

src/pages/dashboard/subscription-report.tsx

@@ -1,7 +1,10 @@
 import { SubscriptionReport } from "../../components/subscription-report"
+import { TransitionPages } from "../../transition"
 
 export const SubscriptionReportPage = () => {
     return (
+        <TransitionPages>
             <SubscriptionReport />
+        </TransitionPages>
     )
 }

src/pages/dashboard/transactions.tsx

@@ -1,7 +1,10 @@
 import { Transactions } from "../../components/transactions"
+import { TransitionPages } from "../../transition"
 
 export const TransactionsPage = () => {
     return (
+        <TransitionPages>
             <Transactions />
+        </TransitionPages>
     )
 }

src/pages/dashboard/wallet.tsx

@@ -1,7 +1,10 @@
+import { TransitionPages } from "../../transition"
 import { WalletPage } from "../../components/wallet/wallet-page"
 
 export const Wallet = () => {
     return (
+        <TransitionPages>
             <WalletPage />
+        </TransitionPages>
     )
 }

src/router/index.tsx

@@ -22,7 +22,9 @@ import { Guard } from "../guard";
 
 export const router = createBrowserRouter([
     {
-        element: <Guard><DashboardLayout /></Guard>,
+        element: <Guard>
+            <DashboardLayout />
+        </Guard>,
         path: "/",
         children: [
             {

src/transition/auth-transition.tsx

@@ -0,0 +1,36 @@
+import { PropsWithChildren } from "react"
+import { motion } from "framer-motion"
+
+export const AuthTransitionPages = ({ children }: PropsWithChildren) => {
+    const animations = {
+        initial: {
+            opacity: 0,
+            scale: 0.95,
+            transition: {
+                duration: 0.5,
+                ease: "easeIn"
+            }
+        },
+        animate: {
+            opacity: 1,
+            scale: 1,
+            transition: {
+                duration: 0.5,
+                ease: "easeOut"
+            }
+        },
+        exit: {
+            opacity: 0,
+            scale: 0.95,
+            transition: {
+                duration: 0.2,
+                ease: "easeIn"
+            }
+        }
+    }
+    return (
+        <motion.div variants={animations} initial="initial" animate="animate" exit="exit" className="flex flex-row min-h-screen p-5 justify-center items-center xl:justify-stretch xl:items-stretch max-h-[750px] overflow-y-hidden relative">
+            {children}
+        </motion.div>
+    )
+}

src/transition/index.tsx

@@ -0,0 +1,24 @@
+import { PropsWithChildren } from "react"
+import { motion } from "framer-motion"
+
+export const TransitionPages = ({ children }: PropsWithChildren) => {
+    const animations = {
+        initial: {
+            opacity: 0,
+            x: 100
+        },
+        animate: {
+            opacity: 1,
+            x: 0
+        },
+        exit: {
+            opacity: 0,
+            x: -100
+        }
+    }
+    return (
+        <motion.div variants={animations} initial="initial" animate="animate" exit="exit">
+            {children}
+        </motion.div>
+    )
+}

src/utility/score.tsx

@@ -1,12 +1,12 @@
 import { createColumns } from "../components/common/create-col";
 import { colConfig } from "../types";
-
+import { formatDateToPersian } from "./getDate";
 
 
 const columnConfigs: colConfig[] | [] = [
     { accessor: "title", header: "عنوان" },
     { accessor: "score", header: "امتیاز" },
-    { accessor: "date", header: "تاریخ", cellRenderer: (info) => info.getValue() && <p style={{ direction: "ltr" }}>{info.getValue()}</p> },
+    { accessor: "created_at", header: "تاریخ", cellRenderer: (info) => info.getValue() && <p style={{ direction: "ltr" }}>{formatDateToPersian(info.getValue())}</p> },
 ];
 
 export const scoresCol = createColumns<any>(columnConfigs);