feat: add subscription page and dashboard widget, update routes and translations

public/locales/en/common.json

@@ -58,6 +58,7 @@
   "sidebar-nav-item-users": "Users",
   "sidebar-nav-item-coupons": "Coupons",
   "sidebar-nav-item-taxes": "Taxes",
+  "sidebar-subscription": "Subscription",
   "sidebar-nav-item-shippings": "Shippings",
   "sidebar-nav-item-settings": "Settings",
   "sidebar-nav-item-store-notice": "Store Notice",
@@ -375,6 +376,11 @@
   "text-abuse-report-submitted": "Abusive report submitted successfully",
   "text-report": "Report",
   "text-summary": "Summary",
+  "text-7day-subscription": "You have a 7-day free subscription.",
+  "text-1-month-subscription": "You have a 1-Month free subscription.",
+  "text-3-month-subscription": "You have a 3-Month free subscription.",
+  "text-6-month-subscription": "You have a 6-Month free subscription.",
+  "text-1-year-subscription": "You have a 1-Year free subscription.",
   "text-campaign": "campaign",
   "text-pending-order": "Pending Order",
   "text-processing-order": "Processing Order",

src/components/dashboard/admin.tsx

@@ -28,6 +28,8 @@ import { ShoppingIcon } from '@/components/icons/summary/shopping';
 import { BasketIcon } from '@/components/icons/summary/basket';
 import { ChecklistIcon } from '@/components/icons/summary/checklist';
 import Search from '@/components/common/search';
+import { getAuthCredentials } from '@/utils/auth-utils';
+import Subscription from './widgets/subscription/subscription';
 
 // const TotalOrderByStatus = dynamic(
 //   () => import('@/components/dashboard/total-order-by-status')
@@ -64,7 +66,8 @@ export default function Dashboard() {
   const [orderDataRange, setOrderDataRange] = useState(
     data?.todayTotalOrderByStatus,
   );
-  console.log(data);
+  const  token  = getAuthCredentials();
+
   
   const { price: total_revenue } = usePrice(
     data && {
@@ -192,6 +195,7 @@ export default function Dashboard() {
 
   return (
     <div className="grid gap-7 md:gap-8 lg:grid-cols-2 2xl:grid-cols-12">
+      <Subscription />
       <div className="col-span-full rounded-lg bg-light p-6 md:p-7">
         <div className="mb-5 flex items-center justify-between md:mb-7">
           <h3 className="before:content-'' relative mt-1 bg-light text-lg font-semibold text-heading before:absolute before:-top-px before:h-7 before:w-1 before:rounded-tr-md before:rounded-br-md before:bg-accent ltr:before:-left-6 rtl:before:-right-6 md:before:-top-0.5 md:ltr:before:-left-7 md:rtl:before:-right-7 lg:before:h-8">

src/components/dashboard/widgets/subscription/subscription.tsx

@@ -0,0 +1,35 @@
+// components/Subscription.tsx
+import Image from 'next/image';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+const Subscription: React.FC = () => {
+  const { t } = useTranslation('common'); // Specify the namespace if using multiple
+  return (
+    <div className="col-span-full rounded-lg bg-light p-6 md:p-7">
+      <div className="mb-5 flex items-center justify-between md:mb-7">
+        <h3 className="before:content-'' relative mt-1 bg-light text-lg font-semibold text-heading before:absolute before:-top-px before:h-7 before:w-1 before:rounded-tr-md before:rounded-br-md before:bg-accent ltr:before:-left-6 rtl:before:-right-6 md:before:-top-0.5 md:ltr:before:-left-7 md:rtl:before:-right-7 lg:before:h-8">
+          {/* {t('text-7day-subscription')} */}
+          You have a 7-day free subscription.
+        </h3>
+        <div className='p-2 bg-green-50'>
+
+        <p className='text-green-500'>5 days left</p>
+        </div>
+      </div>
+
+      {/* <div className="grid w-full grid-cols-1 gap-5 sm:grid-cols-2 xl:grid-cols-4"> */}
+        <div className="relative w-full max-w-[1500px] h-52"> {/* Use relative positioning for next/image with fill */}
+          <Image
+            src="/image/subscriptions/Frame 1000005697.webp"
+            alt="subscription plan"
+            layout="fill"
+            objectFit="scale-down"
+          />
+        </div>
+      {/* </div> */}
+    </div>
+  );
+};
+
+export default Subscription;

src/config/routes.ts

@@ -22,6 +22,7 @@ export const Routes = {
   checkout: '/orders/checkout',
   verifyEmail: '/verify-email',
   verifyLicense: '/verify-license',
+  subscriptions: '/subscriptions',
   user: {
     ...routesFactory('/users'),
   },

src/data/subscription.ts

@@ -0,0 +1,7 @@
+import { useQuery } from "react-query";
+import { API_ENDPOINTS } from "./client/api-endpoints";
+import { HttpClient } from "./client/http-client";
+
+export const useGetActiveSubscription = () => {
+    return useQuery([API_ENDPOINTS.GET_ACTIVE_SUBSCRIPTION], () => HttpClient.get(API_ENDPOINTS.GET_ACTIVE_SUBSCRIPTION));
+};

src/data/user.ts

@@ -52,7 +52,7 @@ console.log(err);
           return;
         }
         queryClient.clear();
-        // router.replace(Routes.login);
+        router.replace(Routes.login);
       }
     },
   });

src/pages/index.tsx

@@ -35,10 +35,8 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
     locale !== Config.defaultLanguage
       ? `/${locale}${Routes.login}`
       : Routes.login;
-  const { token, permissions } = getAuthCredentials(ctx);
   // if (
-  //   !isAuthenticated({ token, permissions }) ||
-  //   !hasAccess(allowedRoles, permissions)
+    // !isAuthenticated({ token, permissions })
   // ) {
   //   return {
   //     redirect: {
@@ -47,6 +45,8 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
   //     },
   //   };
   // }
+
+  
   if (locale) {
     return {
       props: {

src/pages/subscriptions.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import Layout from '@/components/layouts/admin';
+
+const Subscription: React.FC = () => {
+    const { t } = useTranslation();
+
+    return (
+        <div>
+            <h1>{t('subscription.title')}</h1>
+            <p>{t('subscription.description')}</p>
+        </div>
+    );
+};
+
+export default Subscription;
+
+Subscription.Layout = Layout;
+
+// export const getStaticProps = async ({ locale }: any) => ({
+//   props: {
+//     ...(await serverSideTranslations(locale, ['table', 'common', 'form'])),
+//   },
+// });

src/settings/site.settings.ts

@@ -213,6 +213,11 @@ export const siteSettings = {
         label: 'text-e-commerce-management',
         icon: 'WithdrawIcon',
         childMenu: [
+          {
+            href: Routes.subscriptions,
+            label: 'sidebar-subscription',
+            icon: 'TaxesIcon',
+          },
           {
             href: Routes.tax.list,
             label: 'sidebar-nav-item-taxes',