Browse Source

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

master
sina_sajjadi 2 days ago
parent
commit
f7ed0f2d07
  1. BIN
      public/image/subscriptions/Frame 1000005697.webp
  2. 6
      public/locales/en/common.json
  3. 6
      src/components/dashboard/admin.tsx
  4. 35
      src/components/dashboard/widgets/subscription/subscription.tsx
  5. 1
      src/config/routes.ts
  6. 7
      src/data/subscription.ts
  7. 2
      src/data/user.ts
  8. 6
      src/pages/index.tsx
  9. 24
      src/pages/subscriptions.tsx
  10. 5
      src/settings/site.settings.ts

BIN
public/image/subscriptions/Frame 1000005697.webp

6
public/locales/en/common.json

@ -58,6 +58,7 @@
"sidebar-nav-item-users": "Users", "sidebar-nav-item-users": "Users",
"sidebar-nav-item-coupons": "Coupons", "sidebar-nav-item-coupons": "Coupons",
"sidebar-nav-item-taxes": "Taxes", "sidebar-nav-item-taxes": "Taxes",
"sidebar-subscription": "Subscription",
"sidebar-nav-item-shippings": "Shippings", "sidebar-nav-item-shippings": "Shippings",
"sidebar-nav-item-settings": "Settings", "sidebar-nav-item-settings": "Settings",
"sidebar-nav-item-store-notice": "Store Notice", "sidebar-nav-item-store-notice": "Store Notice",
@ -375,6 +376,11 @@
"text-abuse-report-submitted": "Abusive report submitted successfully", "text-abuse-report-submitted": "Abusive report submitted successfully",
"text-report": "Report", "text-report": "Report",
"text-summary": "Summary", "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-campaign": "campaign",
"text-pending-order": "Pending Order", "text-pending-order": "Pending Order",
"text-processing-order": "Processing Order", "text-processing-order": "Processing Order",

6
src/components/dashboard/admin.tsx

@ -28,6 +28,8 @@ import { ShoppingIcon } from '@/components/icons/summary/shopping';
import { BasketIcon } from '@/components/icons/summary/basket'; import { BasketIcon } from '@/components/icons/summary/basket';
import { ChecklistIcon } from '@/components/icons/summary/checklist'; import { ChecklistIcon } from '@/components/icons/summary/checklist';
import Search from '@/components/common/search'; import Search from '@/components/common/search';
import { getAuthCredentials } from '@/utils/auth-utils';
import Subscription from './widgets/subscription/subscription';
// const TotalOrderByStatus = dynamic( // const TotalOrderByStatus = dynamic(
// () => import('@/components/dashboard/total-order-by-status') // () => import('@/components/dashboard/total-order-by-status')
@ -64,7 +66,8 @@ export default function Dashboard() {
const [orderDataRange, setOrderDataRange] = useState( const [orderDataRange, setOrderDataRange] = useState(
data?.todayTotalOrderByStatus, data?.todayTotalOrderByStatus,
); );
console.log(data);
const token = getAuthCredentials();
const { price: total_revenue } = usePrice( const { price: total_revenue } = usePrice(
data && { data && {
@ -192,6 +195,7 @@ export default function Dashboard() {
return ( return (
<div className="grid gap-7 md:gap-8 lg:grid-cols-2 2xl:grid-cols-12"> <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="col-span-full rounded-lg bg-light p-6 md:p-7">
<div className="mb-5 flex items-center justify-between md:mb-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"> <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">

35
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;

1
src/config/routes.ts

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

7
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));
};

2
src/data/user.ts

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

6
src/pages/index.tsx

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

24
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'])),
// },
// });

5
src/settings/site.settings.ts

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

Loading…
Cancel
Save