First commit

src/app/(blank-layout-pages)/(guest-only)/forgot-password/page.tsx

@@ -0,0 +1,22 @@
+// Next Imports
+import type { Metadata } from 'next'
+
+// Component Imports
+import ForgotPassword from '@views/ForgotPassword'
+
+// Server Action Imports
+import { getServerMode } from '@core/utils/serverHelpers'
+
+export const metadata: Metadata = {
+  title: 'Forgot Password',
+  description: 'Forgotten Password to your account'
+}
+
+const ForgotPasswordPage = async () => {
+  // Vars
+  const mode = await getServerMode()
+
+  return <ForgotPassword mode={mode} />
+}
+
+export default ForgotPasswordPage

src/app/(blank-layout-pages)/(guest-only)/layout.tsx

@@ -0,0 +1,13 @@
+// Type Imports
+import type { ChildrenType } from '@core/types'
+
+// HOC Imports
+import GuestOnlyRoute from '@/hocs/GuestOnlyRoute'
+
+const Layout = async (props: ChildrenType) => {
+  const { children } = props
+
+  return <GuestOnlyRoute>{children}</GuestOnlyRoute>
+}
+
+export default Layout

src/app/(blank-layout-pages)/(guest-only)/login/page.tsx

@@ -0,0 +1,22 @@
+// Next Imports
+import type { Metadata } from 'next'
+
+// Component Imports
+import Login from '@views/Login'
+
+// Server Action Imports
+import { getServerMode } from '@core/utils/serverHelpers'
+
+export const metadata: Metadata = {
+  title: 'Login',
+  description: 'Login to your account'
+}
+
+const LoginPage = async () => {
+  // Vars
+  const mode = await getServerMode()
+
+  return <Login mode={mode} />
+}
+
+export default LoginPage

src/app/(blank-layout-pages)/(guest-only)/register/page.tsx

@@ -0,0 +1,22 @@
+// Next Imports
+import type { Metadata } from 'next'
+
+// Component Imports
+import Register from '@views/Register'
+
+// Server Action Imports
+import { getServerMode } from '@core/utils/serverHelpers'
+
+export const metadata: Metadata = {
+  title: 'Register',
+  description: 'Register to your account'
+}
+
+const RegisterPage = async () => {
+  // Vars
+  const mode = await getServerMode()
+
+  return <Register mode={mode} />
+}
+
+export default RegisterPage

src/app/(blank-layout-pages)/layout.tsx

@@ -0,0 +1,27 @@
+// Type Imports
+import type { ChildrenType } from '@core/types'
+
+// Component Imports
+import Providers from '@components/Providers'
+import BlankLayout from '@layouts/BlankLayout'
+
+// Util Imports
+import { getSystemMode } from '@core/utils/serverHelpers'
+
+type Props = ChildrenType
+
+const Layout = async (props: Props) => {
+  const { children } = props
+
+  // Vars
+  const direction = 'rtl' // Fixed RTL direction
+  const systemMode = await getSystemMode()
+
+  return (
+    <Providers direction={direction}>
+      <BlankLayout systemMode={systemMode}>{children}</BlankLayout>
+    </Providers>
+  )
+}
+
+export default Layout

src/app/(blank-layout-pages)/pages/auth/forgot-password-v1/page.tsx

@@ -0,0 +1,12 @@
+// Component Imports
+import ForgotPasswordV1 from '@views/pages/auth/ForgotPasswordV1'
+
+const ForgotPasswordV1Page = () => {
+  return (
+    <div className='flex flex-col justify-center items-center min-bs-[100dvh] p-6'>
+      <ForgotPasswordV1 />
+    </div>
+  )
+}
+
+export default ForgotPasswordV1Page

src/app/(blank-layout-pages)/pages/auth/forgot-password-v2/page.tsx

@@ -0,0 +1,14 @@
+// Component Imports
+import ForgotPasswordV2 from '@views/pages/auth/ForgotPasswordV2'
+
+// Server Action Imports
+import { getServerMode } from '@core/utils/serverHelpers'
+
+const ForgotPasswordV2Page = async () => {
+  // Vars
+  const mode = await getServerMode()
+
+  return <ForgotPasswordV2 mode={mode} />
+}
+
+export default ForgotPasswordV2Page

src/app/(blank-layout-pages)/pages/auth/login-v1/page.tsx

@@ -0,0 +1,12 @@
+// Component Imports
+import LoginV1 from '@views/pages/auth/LoginV1'
+
+const LoginV1Page = () => {
+  return (
+    <div className='flex flex-col justify-center items-center min-bs-[100dvh] p-6'>
+      <LoginV1 />
+    </div>
+  )
+}
+
+export default LoginV1Page

src/app/(blank-layout-pages)/pages/auth/login-v2/page.tsx

@@ -0,0 +1,14 @@
+// Component Imports
+import LoginV2 from '@views/pages/auth/LoginV2'
+
+// Server Action Imports
+import { getServerMode } from '@core/utils/serverHelpers'
+
+const LoginV2Page = async () => {
+  // Vars
+  const mode = await getServerMode()
+
+  return <LoginV2 mode={mode} />
+}
+
+export default LoginV2Page

src/app/(blank-layout-pages)/pages/auth/register-multi-steps/page.tsx

@@ -0,0 +1,14 @@
+// Component Imports
+import RegisterMultiSteps from '@views/pages/auth/register-multi-steps'
+
+// Server Action Imports
+import { getServerMode } from '@core/utils/serverHelpers'
+
+const RegisterMultiStepsPage = async () => {
+  // Vars
+  const mode = await getServerMode()
+
+  return <RegisterMultiSteps mode={mode} />
+}
+
+export default RegisterMultiStepsPage

src/app/(blank-layout-pages)/pages/auth/register-v1/page.tsx

@@ -0,0 +1,12 @@
+// Component Imports
+import RegisterV1 from '@views/pages/auth/RegisterV1'
+
+const RegisterV1Page = () => {
+  return (
+    <div className='flex flex-col justify-center items-center min-bs-[100dvh] p-6'>
+      <RegisterV1 />
+    </div>
+  )
+}
+
+export default RegisterV1Page

src/app/(blank-layout-pages)/pages/auth/register-v2/page.tsx

@@ -0,0 +1,14 @@
+// Component Imports
+import RegisterV2 from '@views/pages/auth/RegisterV2'
+
+// Server Action Imports
+import { getServerMode } from '@core/utils/serverHelpers'
+
+const RegisterV2Page = async () => {
+  // Vars
+  const mode = await getServerMode()
+
+  return <RegisterV2 mode={mode} />
+}
+
+export default RegisterV2Page

src/app/(blank-layout-pages)/pages/auth/reset-password-v1/page.tsx

@@ -0,0 +1,12 @@
+// Component Imports
+import ResetPasswordV1 from '@views/pages/auth/ResetPasswordV1'
+
+const ResetPasswordV1Page = () => {
+  return (
+    <div className='flex flex-col justify-center items-center min-bs-[100dvh] p-6'>
+      <ResetPasswordV1 />
+    </div>
+  )
+}
+
+export default ResetPasswordV1Page

src/app/(blank-layout-pages)/pages/auth/reset-password-v2/page.tsx

@@ -0,0 +1,14 @@
+// Component Imports
+import ResetPasswordV2 from '@views/pages/auth/ResetPasswordV2'
+
+// Server Action Imports
+import { getServerMode } from '@core/utils/serverHelpers'
+
+const ResetPasswordV2Page = async () => {
+  // Vars
+  const mode = await getServerMode()
+
+  return <ResetPasswordV2 mode={mode} />
+}
+
+export default ResetPasswordV2Page

src/app/(blank-layout-pages)/pages/auth/two-steps-v1/page.tsx

@@ -0,0 +1,12 @@
+// Component Imports
+import TwoStepsV1 from '@views/pages/auth/TwoStepsV1'
+
+const TwoStepsV1Page = () => {
+  return (
+    <div className='flex flex-col justify-center items-center min-bs-[100dvh] p-6'>
+      <TwoStepsV1 />
+    </div>
+  )
+}
+
+export default TwoStepsV1Page

src/app/(blank-layout-pages)/pages/auth/two-steps-v2/page.tsx

@@ -0,0 +1,14 @@
+// Component Imports
+import TwoStepsV2 from '@views/pages/auth/TwoStepsV2'
+
+// Server Action Imports
+import { getServerMode } from '@core/utils/serverHelpers'
+
+const TwoStepsV2Page = async () => {
+  // Vars
+  const mode = await getServerMode()
+
+  return <TwoStepsV2 mode={mode} />
+}
+
+export default TwoStepsV2Page

src/app/(blank-layout-pages)/pages/auth/verify-email-v1/page.tsx

@@ -0,0 +1,12 @@
+// Component Imports
+import VerifyEmailV1 from '@views/pages/auth/VerifyEmailV1'
+
+const VerifyEmailV1Page = () => {
+  return (
+    <div className='flex flex-col justify-center items-center min-bs-[100dvh] p-6'>
+      <VerifyEmailV1 />
+    </div>
+  )
+}
+
+export default VerifyEmailV1Page

src/app/(blank-layout-pages)/pages/auth/verify-email-v2/page.tsx

@@ -0,0 +1,14 @@
+// Component Imports
+import VerifyEmailV2 from '@views/pages/auth/VerifyEmailV2'
+
+// Server Action Imports
+import { getServerMode } from '@core/utils/serverHelpers'
+
+const VerifyEmailV2Page = async () => {
+  // Vars
+  const mode = await getServerMode()
+
+  return <VerifyEmailV2 mode={mode} />
+}
+
+export default VerifyEmailV2Page

src/app/(blank-layout-pages)/pages/misc/401-not-authorized/page.tsx

@@ -0,0 +1,14 @@
+// Component Imports
+import NotAuthorized from '@views/NotAuthorized'
+
+// Server Action Imports
+import { getServerMode } from '@core/utils/serverHelpers'
+
+const Error401 = async () => {
+  // Vars
+  const mode = await getServerMode()
+
+  return <NotAuthorized mode={mode} />
+}
+
+export default Error401

src/app/(blank-layout-pages)/pages/misc/404-not-found/page.tsx

@@ -0,0 +1,14 @@
+// Component Imports
+import NotFound from '@views/NotFound'
+
+// Server Action Imports
+import { getServerMode } from '@core/utils/serverHelpers'
+
+const Error = async () => {
+  // Vars
+  const mode = await getServerMode()
+
+  return <NotFound mode={mode} />
+}
+
+export default Error

src/app/(blank-layout-pages)/pages/misc/coming-soon/page.tsx

@@ -0,0 +1,14 @@
+// Component Imports
+import ComingSoon from '@views/pages/misc/ComingSoon'
+
+// Server Action Imports
+import { getServerMode } from '@core/utils/serverHelpers'
+
+const ComingSoonPage = async () => {
+  // Vars
+  const mode = await getServerMode()
+
+  return <ComingSoon mode={mode} />
+}
+
+export default ComingSoonPage

src/app/(blank-layout-pages)/pages/misc/under-maintenance/page.tsx

@@ -0,0 +1,14 @@
+// Component Imports
+import UnderMaintenance from '@views/pages/misc/UnderMaintenance'
+
+// Server Action Imports
+import { getServerMode } from '@core/utils/serverHelpers'
+
+const UnderMaintenancePage = async () => {
+  // Vars
+  const mode = await getServerMode()
+
+  return <UnderMaintenance mode={mode} />
+}
+
+export default UnderMaintenancePage

src/app/(dashboard)/(private)/apps/academy/course-details/page.tsx

@@ -0,0 +1,47 @@
+// MUI Imports
+import Grid from '@mui/material/Grid2'
+
+// Component Imports
+import Details from '@views/apps/academy/course-details/Details'
+import Sidebar from '@views/apps/academy/course-details/Sidebar'
+
+// Data Imports
+import { getAcademyData } from '@/app/server/actions'
+
+/**
+ * ! If you need data using an API call, uncomment the below API code, update the `process.env.API_URL` variable in the
+ * ! `.env` file found at root of your project and also update the API endpoints like `/apps/academy` in below example.
+ * ! Also, remove the above server action import and the action itself from the `src/app/server/actions.ts` file to clean up unused code
+ * ! because we've used the server action for getting our static data.
+ */
+
+/* const getAcademyData = async () => {
+  // Vars
+  const res = await fetch(`${process.env.API_URL}/apps/academy`)
+
+  if (!res.ok) {
+    throw new Error('Failed to fetch academy data')
+  }
+
+  return res.json()
+} */
+
+const CourseDetailsPage = async () => {
+  // Vars
+  const data = await getAcademyData()
+
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12, md: 8 }}>
+        <Details data={data?.courseDetails} />
+      </Grid>
+      <Grid size={{ xs: 12, md: 4 }}>
+        <div className='sticky top-[94px]'>
+          <Sidebar content={data?.courseDetails.content} />
+        </div>
+      </Grid>
+    </Grid>
+  )
+}
+
+export default CourseDetailsPage

src/app/(dashboard)/(private)/apps/academy/dashboard/page.tsx

@@ -0,0 +1,65 @@
+// MUI Imports
+import Grid from '@mui/material/Grid2'
+
+// Component Imports
+import WelcomeCard from '@views/apps/academy/dashboard/WelcomeCard'
+import InterestedTopics from '@views/apps/academy/dashboard/InterestedTopics'
+import PopularInstructors from '@views/apps/academy/dashboard/PopularInstructors'
+import TopCourses from '@views/apps/academy/dashboard/TopCourses'
+import UpcomingWebinar from '@views/apps/academy/dashboard/UpcomingWebinar'
+import AssignmentProgress from '@views/apps/academy/dashboard/AssignmentProgress'
+import CourseTable from '@views/apps/academy/dashboard/CourseTable'
+
+// Data Imports
+import { getAcademyData } from '@/app/server/actions'
+
+/**
+ * ! If you need data using an API call, uncomment the below API code, update the `process.env.API_URL` variable in the
+ * ! `.env` file found at root of your project and also update the API endpoints like `/apps/academy` in below example.
+ * ! Also, remove the above server action import and the action itself from the `src/app/server/actions.ts` file to clean up unused code
+ * ! because we've used the server action for getting our static data.
+ */
+
+/* const getAcademyData = async () => {
+  // Vars
+  const res = await fetch(`${process.env.API_URL}/apps/academy`)
+
+  if (!res.ok) {
+    throw new Error('Failed to fetch academy data')
+  }
+
+  return res.json()
+} */
+
+const AcademyDashboard = async () => {
+  // Vars
+  const data = await getAcademyData()
+
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12 }}>
+        <WelcomeCard />
+      </Grid>
+      {/* <Grid size={{ xs: 12, md: 8 }}>
+        <InterestedTopics />
+      </Grid>
+      <Grid size={{ xs: 12, sm: 6, md: 4 }}>
+        <PopularInstructors />
+      </Grid>
+      <Grid size={{ xs: 12, sm: 6, md: 4 }}>
+        <TopCourses />
+      </Grid>
+      <Grid size={{ xs: 12, sm: 6, md: 4 }}>
+        <UpcomingWebinar />
+      </Grid>
+      <Grid size={{ xs: 12, sm: 6, md: 4 }}>
+        <AssignmentProgress />
+      </Grid> */}
+      {/* <Grid size={{ xs: 12 }}>
+        <CourseTable courseData={data?.courses} />
+      </Grid> */}
+    </Grid>
+  )
+}
+
+export default AcademyDashboard

src/app/(dashboard)/(private)/apps/academy/my-courses/page.tsx

@@ -0,0 +1,36 @@
+// Component Imports
+import AcademyMyCourse from '@/views/apps/academy/my-courses'
+
+// Server Action Imports
+import { getServerMode } from '@core/utils/serverHelpers'
+
+// Data Imports
+import { getAcademyData } from '@/app/server/actions'
+
+/**
+ * ! If you need data using an API call, uncomment the below API code, update the `process.env.API_URL` variable in the
+ * ! `.env` file found at root of your project and also update the API endpoints like `/apps/academy` in below example.
+ * ! Also, remove the above server action import and the action itself from the `src/app/server/actions.ts` file to clean up unused code
+ * ! because we've used the server action for getting our static data.
+ */
+
+/* const getAcademyData = async () => {
+  // Vars
+  const res = await fetch(`${process.env.API_URL}/apps/academy`)
+
+  if (!res.ok) {
+    throw new Error('Failed to fetch academy data')
+  }
+
+  return res.json()
+} */
+
+const MyCoursePage = async () => {
+  // Vars
+  const mode = await getServerMode()
+  const data = await getAcademyData()
+
+  return <AcademyMyCourse mode={mode} courseData={data?.courses} />
+}
+
+export default MyCoursePage

src/app/(dashboard)/(private)/apps/ai-chat/page.tsx

@@ -0,0 +1,10 @@
+// Component Imports
+import AiChatView from '@views/apps/ai-chat'
+
+const AiChatPage = () => {
+  return <AiChatView />
+}
+
+export default AiChatPage
+
+

src/app/(dashboard)/(private)/apps/calendar/page.tsx

@@ -0,0 +1,20 @@
+// MUI Imports
+import Card from '@mui/material/Card'
+
+// Component Imports
+import CalendarWrapper from '@views/apps/calendar/CalendarWrapper'
+
+// Styled Component Imports
+import AppFullCalendar from '@/libs/styles/AppFullCalendar'
+
+const CalendarApp = () => {
+  return (
+    <Card className='overflow-visible'>
+      <AppFullCalendar className='app-calendar'>
+        <CalendarWrapper />
+      </AppFullCalendar>
+    </Card>
+  )
+}
+
+export default CalendarApp

src/app/(dashboard)/(private)/apps/chat/page.tsx

@@ -0,0 +1,8 @@
+// Component Imports
+import ChatWrapper from '@views/apps/chat'
+
+const ChatApp = () => {
+  return <ChatWrapper />
+}
+
+export default ChatApp

src/app/(dashboard)/(private)/apps/ecommerce/customers/details/[id]/page.tsx

@@ -0,0 +1,46 @@
+// Next Imports
+import { redirect } from 'next/navigation'
+
+// Type Imports
+import type { Customer } from '@/types/apps/ecommerceTypes'
+
+// Component Imports
+import CustomerDetails from '@/views/apps/ecommerce/customers/details'
+
+// Data Imports
+import { getEcommerceData } from '@/app/server/actions'
+
+/**
+ * ! If you need data using an API call, uncomment the below API code, update the `process.env.API_URL` variable in the
+ * ! `.env` file found at root of your project and also update the API endpoints like `/apps/ecommerce` in below example.
+ * ! Also, remove the above server action import and the action itself from the `src/app/server/actions.ts` file to clean up unused code
+ * ! because we've used the server action for getting our static data.
+ */
+
+/* const getEcommerceData = async () => {
+  // Vars
+  const res = await fetch(`${process.env.API_URL}/apps/ecommerce`)
+
+  if (!res.ok) {
+    throw new Error('Failed to fetch ecommerce data')
+  }
+
+  return res.json()
+} */
+
+const CustomerDetailsPage = async (props: { params: Promise<{ id: string }> }) => {
+  const params = await props.params
+
+  // Vars
+  const data = await getEcommerceData()
+
+  const filteredData = data?.customerData.filter((item: Customer) => item.customerId === params.id)[0]
+
+  if (!filteredData) {
+    redirect('/not-found')
+  }
+
+  return filteredData ? <CustomerDetails customerData={filteredData} customerId={params.id} /> : null
+}
+
+export default CustomerDetailsPage

src/app/(dashboard)/(private)/apps/ecommerce/customers/list/page.tsx

@@ -0,0 +1,31 @@
+import CustomerListTable from '@views/apps/ecommerce/customers/list/CustomerListTable'
+
+// Data Imports
+import { getEcommerceData } from '@/app/server/actions'
+
+/**
+ * ! If you need data using an API call, uncomment the below API code, update the `process.env.API_URL` variable in the
+ * ! `.env` file found at root of your project and also update the API endpoints like `/apps/ecommerce` in below example.
+ * ! Also, remove the above server action import and the action itself from the `src/app/server/actions.ts` file to clean up unused code
+ * ! because we've used the server action for getting our static data.
+ */
+
+/* const getEcommerceData = async () => {
+  // Vars
+  const res = await fetch(`${process.env.API_URL}/apps/ecommerce`)
+
+  if (!res.ok) {
+    throw new Error('Failed to fetch ecommerce data')
+  }
+
+  return res.json()
+} */
+
+const CustomerListTablePage = async () => {
+  // Vars
+  const data = await getEcommerceData()
+
+  return <CustomerListTable customerData={data?.customerData} />
+}
+
+export default CustomerListTablePage

src/app/(dashboard)/(private)/apps/ecommerce/dashboard/page.tsx

@@ -0,0 +1,66 @@
+// MUI Imports
+import Grid from '@mui/material/Grid2'
+
+// Components Imports
+import CongratulationsJohn from '@views/apps/ecommerce/dashboard/Congratulations'
+import StatisticsCard from '@views/apps/ecommerce/dashboard/StatisticsCard'
+import LineChartProfit from '@views/apps/ecommerce/dashboard/LineChartProfit'
+import RadialBarChart from '@views/apps/ecommerce/dashboard/RadialBarChart'
+import DonutChartGeneratedLeads from '@views/apps/ecommerce/dashboard/DonutChartGeneratedLeads'
+import RevenueReport from '@views/apps/ecommerce/dashboard/RevenueReport'
+import EarningReports from '@views/apps/ecommerce/dashboard/EarningReports'
+import PopularProducts from '@views/apps/ecommerce/dashboard/PopularProducts'
+import Orders from '@views/apps/ecommerce/dashboard/Orders'
+import Transactions from '@views/apps/ecommerce/dashboard/Transactions'
+import InvoiceListTable from '@views/apps/ecommerce/dashboard/InvoiceListTable'
+
+// TODO: Connect to backend API when invoice service is available
+
+const EcommerceDashboard = async () => {
+  // TODO: Fetch data from backend API when invoice service is available
+  const invoiceData = undefined
+
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12, md: 4 }}>
+        <CongratulationsJohn />
+      </Grid>
+      <Grid size={{ xs: 12, md: 8 }}>
+        <StatisticsCard />
+      </Grid>
+      <Grid size={{ xs: 12, xl: 4 }}>
+        <Grid container spacing={6}>
+          <Grid size={{ xs: 12, sm: 6, md: 3, xl: 6 }}>
+            <LineChartProfit />
+          </Grid>
+          <Grid size={{ xs: 12, sm: 6, md: 3, xl: 6 }}>
+            <RadialBarChart />
+          </Grid>
+          <Grid size={{ xs: 12, md: 6, xl: 12 }}>
+            <DonutChartGeneratedLeads />
+          </Grid>
+        </Grid>
+      </Grid>
+      <Grid size={{ xs: 12, xl: 8 }}>
+        <RevenueReport />
+      </Grid>
+      <Grid size={{ xs: 12, sm: 6, lg: 4 }}>
+        <EarningReports />
+      </Grid>
+      <Grid size={{ xs: 12, sm: 6, lg: 4 }}>
+        <PopularProducts />
+      </Grid>
+      <Grid size={{ xs: 12, sm: 6, lg: 4 }}>
+        <Orders />
+      </Grid>
+      <Grid size={{ xs: 12, sm: 6, lg: 4 }}>
+        <Transactions />
+      </Grid>
+      <Grid size={{ xs: 12, lg: 8 }}>
+        <InvoiceListTable invoiceData={invoiceData} />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default EcommerceDashboard

src/app/(dashboard)/(private)/apps/ecommerce/manage-reviews/page.tsx

@@ -0,0 +1,49 @@
+// MUI Imports
+import Grid from '@mui/material/Grid2'
+
+// Component Imports
+import TotalReviews from '@views/apps/ecommerce/manage-reviews/TotalReviews'
+import ReviewsStatistics from '@views/apps/ecommerce/manage-reviews/ReviewsStatistics'
+import ManageReviewsTable from '@views/apps/ecommerce/manage-reviews/ManageReviewsTable'
+
+// Data Imports
+import { getEcommerceData } from '@/app/server/actions'
+
+/**
+ * ! If you need data using an API call, uncomment the below API code, update the `process.env.API_URL` variable in the
+ * ! `.env` file found at root of your project and also update the API endpoints like `/apps/ecommerce` in below example.
+ * ! Also, remove the above server action import and the action itself from the `src/app/server/actions.ts` file to clean up unused code
+ * ! because we've used the server action for getting our static data.
+ */
+
+/* const getEcommerceData = async () => {
+  // Vars
+  const res = await fetch(`${process.env.API_URL}/apps/ecommerce`)
+
+  if (!res.ok) {
+    throw new Error('Failed to fetch ecommerce data')
+  }
+
+  return res.json()
+} */
+
+const eCommerceManageReviews = async () => {
+  // Vars
+  const data = await getEcommerceData()
+
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12, md: 6 }}>
+        <TotalReviews />
+      </Grid>
+      <Grid size={{ xs: 12, md: 6 }}>
+        <ReviewsStatistics />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <ManageReviewsTable reviewsData={data?.reviews} />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default eCommerceManageReviews

src/app/(dashboard)/(private)/apps/ecommerce/orders/details/[id]/page.tsx

@@ -0,0 +1,46 @@
+// Next Imports
+import { redirect } from 'next/navigation'
+
+// Type Imports
+import type { OrderType } from '@/types/apps/ecommerceTypes'
+
+// Component Imports
+import OrderDetails from '@views/apps/ecommerce/orders/details'
+
+// Data Imports
+import { getEcommerceData } from '@/app/server/actions'
+
+/**
+ * ! If you need data using an API call, uncomment the below API code, update the `process.env.API_URL` variable in the
+ * ! `.env` file found at root of your project and also update the API endpoints like `/apps/ecommerce` in below example.
+ * ! Also, remove the above server action import and the action itself from the `src/app/server/actions.ts` file to clean up unused code
+ * ! because we've used the server action for getting our static data.
+ */
+
+/* const getEcommerceData = async () => {
+  // Vars
+  const res = await fetch(`${process.env.API_URL}/apps/ecommerce`)
+
+  if (!res.ok) {
+    throw new Error('Failed to fetch ecommerce data')
+  }
+
+  return res.json()
+} */
+
+const OrderDetailsPage = async (props: { params: Promise<{ id: string }> }) => {
+  const params = await props.params
+
+  // Vars
+  const data = await getEcommerceData()
+
+  const filteredData = data?.orderData.filter((item: OrderType) => item.order === params.id)[0]
+
+  if (!filteredData) {
+    redirect('/not-found')
+  }
+
+  return filteredData ? <OrderDetails orderData={filteredData} order={params.id} /> : null
+}
+
+export default OrderDetailsPage

src/app/(dashboard)/(private)/apps/ecommerce/orders/list/page.tsx

@@ -0,0 +1,32 @@
+// Component Imports
+import OrderList from '@views/apps/ecommerce/orders/list'
+
+// Data Imports
+import { getEcommerceData } from '@/app/server/actions'
+
+/**
+ * ! If you need data using an API call, uncomment the below API code, update the `process.env.API_URL` variable in the
+ * ! `.env` file found at root of your project and also update the API endpoints like `/apps/ecommerce` in below example.
+ * ! Also, remove the above server action import and the action itself from the `src/app/server/actions.ts` file to clean up unused code
+ * ! because we've used the server action for getting our static data.
+ */
+
+/* const getEcommerceData = async () => {
+  // Vars
+  const res = await fetch(`${process.env.API_URL}/apps/ecommerce`)
+
+  if (!res.ok) {
+    throw new Error('Failed to fetch ecommerce data')
+  }
+
+  return res.json()
+} */
+
+const OrdersListPage = async () => {
+  // Vars
+  const data = await getEcommerceData()
+
+  return <OrderList orderData={data?.orderData} />
+}
+
+export default OrdersListPage

src/app/(dashboard)/(private)/apps/ecommerce/products/add/page.tsx

@@ -0,0 +1,49 @@
+// MUI Imports
+import Grid from '@mui/material/Grid2'
+
+// Component Imports
+import ProductAddHeader from '@views/apps/ecommerce/products/add/ProductAddHeader'
+import ProductInformation from '@views/apps/ecommerce/products/add/ProductInformation'
+import ProductImage from '@views/apps/ecommerce/products/add/ProductImage'
+import ProductVariants from '@views/apps/ecommerce/products/add/ProductVariants'
+import ProductInventory from '@views/apps/ecommerce/products/add/ProductInventory'
+import ProductPricing from '@views/apps/ecommerce/products/add/ProductPricing'
+import ProductOrganize from '@views/apps/ecommerce/products/add/ProductOrganize'
+
+const eCommerceProductsAdd = () => {
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12 }}>
+        <ProductAddHeader />
+      </Grid>
+      <Grid size={{ xs: 12, md: 8 }}>
+        <Grid container spacing={6}>
+          <Grid size={{ xs: 12 }}>
+            <ProductInformation />
+          </Grid>
+          <Grid size={{ xs: 12 }}>
+            <ProductImage />
+          </Grid>
+          <Grid size={{ xs: 12 }}>
+            <ProductVariants />
+          </Grid>
+          <Grid size={{ xs: 12 }}>
+            <ProductInventory />
+          </Grid>
+        </Grid>
+      </Grid>
+      <Grid size={{ xs: 12, md: 4 }}>
+        <Grid container spacing={6}>
+          <Grid size={{ xs: 12 }}>
+            <ProductPricing />
+          </Grid>
+          <Grid size={{ xs: 12 }}>
+            <ProductOrganize />
+          </Grid>
+        </Grid>
+      </Grid>
+    </Grid>
+  )
+}
+
+export default eCommerceProductsAdd

src/app/(dashboard)/(private)/apps/ecommerce/products/category/page.tsx

@@ -0,0 +1,8 @@
+// Component Imports
+import ProductCategoryTable from '@views/apps/ecommerce/products/category/ProductCategoryTable'
+
+const eCommerceProductsCategory = () => {
+  return <ProductCategoryTable />
+}
+
+export default eCommerceProductsCategory

src/app/(dashboard)/(private)/apps/ecommerce/products/list/page.tsx

@@ -0,0 +1,45 @@
+// MUI Imports
+import Grid from '@mui/material/Grid2'
+
+// Component Imports
+import ProductListTable from '@views/apps/ecommerce/products/list/ProductListTable'
+import ProductCard from '@views/apps/ecommerce/products/list/ProductCard'
+
+// Data Imports
+import { getEcommerceData } from '@/app/server/actions'
+
+/**
+ * ! If you need data using an API call, uncomment the below API code, update the `process.env.API_URL` variable in the
+ * ! `.env` file found at root of your project and also update the API endpoints like `/apps/ecommerce` in below example.
+ * ! Also, remove the above server action import and the action itself from the `src/app/server/actions.ts` file to clean up unused code
+ * ! because we've used the server action for getting our static data.
+ */
+
+/* const getEcommerceData = async () => {
+  // Vars
+  const res = await fetch(`${process.env.API_URL}/apps/ecommerce`)
+
+  if (!res.ok) {
+    throw new Error('Failed to fetch ecommerce data')
+  }
+
+  return res.json()
+} */
+
+const eCommerceProductsList = async () => {
+  // Vars
+  const data = await getEcommerceData()
+
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12 }}>
+        <ProductCard />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <ProductListTable productData={data?.products} />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default eCommerceProductsList

src/app/(dashboard)/(private)/apps/ecommerce/referrals/page.tsx

@@ -0,0 +1,72 @@
+// MUI Imports
+import Grid from '@mui/material/Grid2'
+
+// Component Imports
+import HorizontalStatisticsCard from '@views/apps/ecommerce/referrals/HorizontalStatisticsCard'
+import IconStepsCard from '@views/apps/ecommerce/referrals/IconStepsCard'
+import InviteAndShare from '@views/apps/ecommerce/referrals/InviteAndShare'
+import ReferredUsersTable from '@views/apps/ecommerce/referrals/ReferredUsersTable'
+
+// Data Imports
+import { getEcommerceData, getStatisticsData } from '@/app/server/actions'
+
+/**
+ * ! If you need data using an API call, uncomment the below API code, update the `process.env.API_URL` variable in the
+ * ! `.env` file found at root of your project and also update the API endpoints like `/pages/widget-examples` in below example.
+ * ! Also, remove the above server action import and the action itself from the `src/app/server/actions.ts` file to clean up unused code
+ * ! because we've used the server action for getting our static data.
+ */
+
+/* const getStatisticsData = async () => {
+  // Vars
+  const res = await fetch(`${process.env.API_URL}/pages/widget-examples`)
+
+  if (!res.ok) {
+    throw new Error('Failed to fetch statistics data')
+  }
+
+  return res.json()
+} */
+
+/**
+ * ! If you need data using an API call, uncomment the below API code, update the `process.env.API_URL` variable in the
+ * ! `.env` file found at root of your project and also update the API endpoints like `/apps/ecommerce` in below example.
+ * ! Also, remove the above server action import and the action itself from the `src/app/server/actions.ts` file to clean up unused code
+ * ! because we've used the server action for getting our static data.
+ */
+
+/* const getEcommerceData = async () => {
+  // Vars
+  const res = await fetch(`${process.env.API_URL}/apps/ecommerce`)
+
+  if (!res.ok) {
+    throw new Error('Failed to fetch ecommerce data')
+  }
+
+  return res.json()
+} */
+
+const eCommerceReferrals = async () => {
+  // Vars
+  const statsData = await getStatisticsData()
+  const ecommerceData = await getEcommerceData()
+
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12 }}>
+        <HorizontalStatisticsCard data={statsData?.statsHorizontalWithAvatar} />
+      </Grid>
+      <Grid size={{ xs: 12, md: 8 }}>
+        <IconStepsCard />
+      </Grid>
+      <Grid size={{ xs: 12, md: 4 }}>
+        <InviteAndShare />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <ReferredUsersTable referralsData={ecommerceData?.referrals} />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default eCommerceReferrals

src/app/(dashboard)/(private)/apps/ecommerce/settings/page.tsx

@@ -0,0 +1,31 @@
+// React Imports
+import type { ReactElement } from 'react'
+
+// Next Imports
+import dynamic from 'next/dynamic'
+
+// Component Imports
+import Settings from '@views/apps/ecommerce/settings'
+
+const StoreDetailsTab = dynamic(() => import('@views/apps/ecommerce/settings/store-details'))
+const PaymentsTab = dynamic(() => import('@views/apps/ecommerce/settings/payments'))
+const CheckoutTab = dynamic(() => import('@views/apps/ecommerce/settings/checkout'))
+const ShippingDeliveryTab = dynamic(() => import('@views/apps/ecommerce/settings/ShippingDelivery'))
+const LocationsTab = dynamic(() => import('@views/apps/ecommerce/settings/locations'))
+const NotificationsTab = dynamic(() => import('@views/apps/ecommerce/settings/Notifications'))
+
+// Vars
+const tabContentList = (): { [key: string]: ReactElement } => ({
+  'store-details': <StoreDetailsTab />,
+  payments: <PaymentsTab />,
+  checkout: <CheckoutTab />,
+  'shipping-delivery': <ShippingDeliveryTab />,
+  locations: <LocationsTab />,
+  notifications: <NotificationsTab />
+})
+
+const eCommerceSettings = () => {
+  return <Settings tabContentList={tabContentList()} />
+}
+
+export default eCommerceSettings

src/app/(dashboard)/(private)/apps/email/[folder]/page.tsx

@@ -0,0 +1,10 @@
+// Component Imports
+import EmailWrapper from '@views/apps/email'
+
+const EmailFolderPage = async (props: { params: Promise<{ folder: string }> }) => {
+  const params = await props.params
+
+  return <EmailWrapper folder={params.folder} />
+}
+
+export default EmailFolderPage

src/app/(dashboard)/(private)/apps/email/label/[label]/page.tsx

@@ -0,0 +1,10 @@
+// Component Imports
+import EmailWrapper from '@views/apps/email'
+
+const EmailLabelPage = async (props: { params: Promise<{ label: string }> }) => {
+  const params = await props.params
+
+  return <EmailWrapper label={params.label} />
+}
+
+export default EmailLabelPage

src/app/(dashboard)/(private)/apps/email/page.tsx

@@ -0,0 +1,8 @@
+// Component Imports
+import EmailWrapper from '@views/apps/email'
+
+const EmailPage = () => {
+  return <EmailWrapper folder='inbox' />
+}
+
+export default EmailPage

src/app/(dashboard)/(private)/apps/invoice/add/page.tsx

@@ -0,0 +1,45 @@
+// MUI Imports
+import Grid from '@mui/material/Grid2'
+
+// Component Imports
+import AddCard from '@views/apps/invoice/add/AddCard'
+import AddActions from '@views/apps/invoice/add/AddActions'
+
+// Data Imports
+import { getInvoiceData } from '@/app/server/actions'
+
+/**
+ * ! If you need data using an API call, uncomment the below API code, update the `process.env.API_URL` variable in the
+ * ! `.env` file found at root of your project and also update the API endpoints like `/apps/invoice` in below example.
+ * ! Also, remove the above server action import and the action itself from the `src/app/server/actions.ts` file to clean up unused code
+ * ! because we've used the server action for getting our static data.
+ */
+
+/* const getInvoiceData = async () => {
+  // Vars
+  const res = await fetch(`${process.env.API_URL}/apps/invoice`)
+
+  if (!res.ok) {
+    throw new Error('Failed to fetch invoice data')
+  }
+
+  return res.json()
+}
+ */
+const InvoiceAdd = async () => {
+  // Vars
+  const data = await getInvoiceData()
+
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12, md: 9 }}>
+        <AddCard invoiceData={data?.invoices} />
+      </Grid>
+      <Grid size={{ xs: 12, md: 3 }}>
+        <AddActions />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default InvoiceAdd

src/app/(dashboard)/(private)/apps/invoice/edit/[id]/page.tsx

@@ -0,0 +1,59 @@
+// Next Imports
+import { redirect } from 'next/navigation'
+
+// MUI Imports
+import Grid from '@mui/material/Grid2'
+
+// Type Imports
+import type { InvoiceType } from '@/types/apps/invoiceTypes'
+
+// Component Imports
+import EditCard from '@views/apps/invoice/edit/EditCard'
+import EditActions from '@views/apps/invoice/edit/EditActions'
+
+// Data Imports
+import { getInvoiceData } from '@/app/server/actions'
+
+/**
+ * ! If you need data using an API call, uncomment the below API code, update the `process.env.API_URL` variable in the
+ * ! `.env` file found at root of your project and also update the API endpoints like `/apps/invoice` in below example.
+ * ! Also, remove the above server action import and the action itself from the `src/app/server/actions.ts` file to clean up unused code
+ * ! because we've used the server action for getting our static data.
+ */
+
+/* const getInvoiceData = async () => {
+  // Vars
+  const res = await fetch(`${process.env.API_URL}/apps/invoice`)
+
+  if (!res.ok) {
+    throw new Error('Failed to fetch invoice data')
+  }
+
+  return res.json()
+} */
+
+const EditPage = async (props: { params: Promise<{ id: string }> }) => {
+  const params = await props.params
+
+  // Vars
+  const data = await getInvoiceData()
+
+  const filteredData = data?.invoices.filter((invoice: InvoiceType) => invoice.id === params.id)[0]
+
+  if (!filteredData) {
+    redirect('/not-found')
+  }
+
+  return filteredData ? (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12, md: 9 }}>
+        <EditCard data={data?.invoices} invoiceData={filteredData} id={params.id} />
+      </Grid>
+      <Grid size={{ xs: 12, md: 3 }}>
+        <EditActions id={params.id} />
+      </Grid>
+    </Grid>
+  ) : null
+}
+
+export default EditPage

src/app/(dashboard)/(private)/apps/invoice/list/page.tsx

@@ -0,0 +1,41 @@
+// MUI Imports
+import Grid from '@mui/material/Grid2'
+
+// Component Imports
+import InvoiceList from '@views/apps/invoice/list'
+
+// Data Imports
+import { getInvoiceData } from '@/app/server/actions'
+
+/**
+ * ! If you need data using an API call, uncomment the below API code, update the `process.env.API_URL` variable in the
+ * ! `.env` file found at root of your project and also update the API endpoints like `/apps/invoice` in below example.
+ * ! Also, remove the above server action import and the action itself from the `src/app/server/actions.ts` file to clean up unused code
+ * ! because we've used the server action for getting our static data.
+ */
+
+/* const getInvoiceData = async () => {
+  // Vars
+  const res = await fetch(`${process.env.API_URL}/apps/invoice`)
+
+  if (!res.ok) {
+    throw new Error('Failed to fetch invoice data')
+  }
+
+  return res.json()
+} */
+
+const InvoiceApp = async () => {
+  // Vars
+  const data = await getInvoiceData()
+
+  return (
+    <Grid container>
+      <Grid size={{ xs: 12 }}>
+        <InvoiceList invoiceData={data?.invoices} />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default InvoiceApp

src/app/(dashboard)/(private)/apps/invoice/preview/[id]/page.tsx

@@ -0,0 +1,46 @@
+// Next Imports
+import { redirect } from 'next/navigation'
+
+// Type Imports
+import type { InvoiceType } from '@/types/apps/invoiceTypes'
+
+// Component Imports
+import Preview from '@views/apps/invoice/preview'
+
+// Data Imports
+import { getInvoiceData } from '@/app/server/actions'
+
+/**
+ * ! If you need data using an API call, uncomment the below API code, update the `process.env.API_URL` variable in the
+ * ! `.env` file found at root of your project and also update the API endpoints like `/apps/invoice` in below example.
+ * ! Also, remove the above server action import and the action itself from the `src/app/server/actions.ts` file to clean up unused code
+ * ! because we've used the server action for getting our static data.
+ */
+
+/* const getInvoiceData = async () => {
+  // Vars
+  const res = await fetch(`${process.env.API_URL}/apps/invoice`)
+
+  if (!res.ok) {
+    throw new Error('Failed to fetch invoice data')
+  }
+
+  return res.json()
+} */
+
+const PreviewPage = async (props: { params: Promise<{ id: string }> }) => {
+  const params = await props.params
+
+  // Vars
+  const data = await getInvoiceData()
+
+  const filteredData = data?.invoices.filter((invoice: InvoiceType) => invoice.id === params.id)[0]
+
+  if (!filteredData) {
+    redirect('/not-found')
+  }
+
+  return filteredData ? <Preview invoiceData={filteredData} id={params.id} /> : null
+}
+
+export default PreviewPage

src/app/(dashboard)/(private)/apps/kanban/page.tsx

@@ -0,0 +1,27 @@
+// Third-party Imports
+import classnames from 'classnames'
+
+// Component Imports
+import KanbanBoard from '@views/apps/kanban/KanbanBoard'
+
+// Util Imports
+import { commonLayoutClasses } from '@layouts/utils/layoutClasses'
+
+// Styles Imports
+import styles from '@views/apps/kanban/styles.module.css'
+
+const KanbanPage = () => {
+  return (
+    <div
+      className={classnames(
+        commonLayoutClasses.contentHeightFixed,
+        styles.scroll,
+        'is-full overflow-auto pis-2 -mis-2'
+      )}
+    >
+      <KanbanBoard />
+    </div>
+  )
+}
+
+export default KanbanPage

src/app/(dashboard)/(private)/apps/logistics/dashboard/page.tsx

@@ -0,0 +1,84 @@
+//MUI Imports
+import Grid from '@mui/material/Grid2'
+
+//Component Imports
+import LogisticsStatisticsCard from '@views/apps/logistics/dashboard/LogisticsStatisticsCard'
+import LogisticsVehicleOverview from '@views/apps/logistics/dashboard/LogisticsVehicleOverview'
+import LogisticsShipmentStatistics from '@views/apps/logistics/dashboard/LogisticsShipmentStatistics'
+import LogisticsDeliveryPerformance from '@views/apps/logistics/dashboard/LogisticsDeliveryPerformance'
+import LogisticsDeliveryExceptions from '@views/apps/logistics/dashboard/LogisticsDeliveryExceptions'
+import LogisticsOrdersByCountries from '@/views/apps/logistics/dashboard/LogisticsOrdersByCountries'
+import LogisticsOverviewTable from '@views/apps/logistics/dashboard/LogisticsOverviewTable'
+
+//Data Imports
+import { getLogisticsData, getStatisticsData } from '@/app/server/actions'
+
+/**
+ * ! If you need data using an API call, uncomment the below API code, update the `process.env.API_URL` variable in the
+ * ! `.env` file found at root of your project and also update the API endpoints like `/pages/widget-examples` in below example.
+ * ! Also, remove the above server action import and the action itself from the `src/app/server/actions.ts` file to clean up unused code
+ * ! because we've used the server action for getting our static data.
+ */
+
+/* const getStatisticsData = async () => {
+  // Vars
+  const res = await fetch(`${process.env.API_URL}/pages/widget-examples`)
+
+  if (!res.ok) {
+    throw new Error('Failed to fetch statisticsData')
+  }
+
+  return res.json()
+} */
+
+/**
+ * ! If you need data using an API call, uncomment the below API code, update the `process.env.API_URL` variable in the
+ * ! `.env` file found at root of your project and also update the API endpoints like `/apps/logistics` in below example.
+ * ! Also, remove the above server action import and the action itself from the `src/app/server/actions.ts` file to clean up unused code
+ * ! because we've used the server action for getting our static data.
+ */
+
+/* const getLogisticsData = async () => {
+  // Vars
+  const res = await fetch(`${process.env.API_URL}/apps/logistics`)
+
+  if (!res.ok) {
+    throw new Error('Failed to fetch logistics data')
+  }
+
+  return res.json()
+} */
+
+const LogisticsDashboard = async () => {
+  // Vars
+  const statsData = await getStatisticsData()
+  const vehicleData = await getLogisticsData()
+
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12 }}>
+        <LogisticsStatisticsCard data={statsData?.statsHorizontalWithBorder} />
+      </Grid>
+      <Grid size={{ xs: 12, md: 6 }}>
+        <LogisticsVehicleOverview />
+      </Grid>
+      <Grid size={{ xs: 12, md: 6 }}>
+        <LogisticsShipmentStatistics />
+      </Grid>
+      <Grid size={{ xs: 12, md: 4 }}>
+        <LogisticsDeliveryPerformance />
+      </Grid>
+      <Grid size={{ xs: 12, md: 4 }}>
+        <LogisticsDeliveryExceptions />
+      </Grid>
+      <Grid size={{ xs: 12, md: 4 }}>
+        <LogisticsOrdersByCountries />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <LogisticsOverviewTable vehicleData={vehicleData?.vehicles} />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default LogisticsDashboard

src/app/(dashboard)/(private)/apps/logistics/fleet/page.tsx

@@ -0,0 +1,8 @@
+// Component Imports
+import Fleet from '@views/apps/logistics/fleet'
+
+const FleetPage = () => {
+  return <Fleet mapboxAccessToken={process.env.MAPBOX_ACCESS_TOKEN!} />
+}
+
+export default FleetPage

src/app/(dashboard)/(private)/apps/permissions/page.tsx

@@ -0,0 +1,58 @@
+'use client'
+
+// React Imports
+import { useEffect, useState } from 'react'
+
+// MUI Imports
+import CircularProgress from '@mui/material/CircularProgress'
+import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography'
+
+// Component Imports
+import Permissions from '@views/apps/permissions'
+
+// API Imports
+import { rolesPermissionsService } from '@/libs/api'
+import type { Permission } from '@/libs/api/services/rolesPermissionsService'
+
+const PermissionsApp = () => {
+  const [permissions, setPermissions] = useState<Permission[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    const fetchPermissions = async () => {
+      try {
+        setLoading(true)
+        const response = await rolesPermissionsService.getPermissions()
+        setPermissions(response.permissions)
+      } catch (err: any) {
+        setError(err.message || 'خطا در دریافت لیست دسترسی‌ها')
+        console.error('Error fetching permissions:', err)
+      } finally {
+        setLoading(false)
+      }
+    }
+    fetchPermissions()
+  }, [])
+
+  if (loading) {
+    return (
+      <Box className='flex items-center justify-center bs-full'>
+        <CircularProgress />
+      </Box>
+    )
+  }
+
+  if (error) {
+    return (
+      <Box className='flex items-center justify-center bs-full'>
+        <Typography color='error'>{error}</Typography>
+      </Box>
+    )
+  }
+
+  return <Permissions permissionsData={permissions} />
+}
+
+export default PermissionsApp

src/app/(dashboard)/(private)/apps/roles/page.tsx

@@ -0,0 +1,76 @@
+'use client'
+
+// React Imports
+import { useEffect, useState } from 'react'
+
+// MUI Imports
+import CircularProgress from '@mui/material/CircularProgress'
+import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography'
+
+// Component Imports
+import Roles from '@views/apps/roles'
+
+// Type Imports
+import type { UsersType } from '@/types/apps/userTypes'
+
+// API Imports
+import { rolesPermissionsService } from '@/libs/api'
+import type { RoleUser } from '@/libs/api/services/rolesPermissionsService'
+
+const RolesApp = () => {
+  const [userData, setUserData] = useState<UsersType[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    const fetchRoles = async () => {
+      try {
+        setLoading(true)
+        const { roles } = await rolesPermissionsService.getRoles()
+        // Fetch users for all roles
+        const allUsers: RoleUser[] = []
+        for (const role of roles) {
+          const users = await rolesPermissionsService.getRoleUsers(role.name)
+          allUsers.push(...users)
+        }
+        // Map RoleUser[] to UsersType[] by adding default values for missing fields
+        const mappedUsers: UsersType[] = allUsers.map(user => ({
+          ...user,
+          company: '',
+          country: '',
+          contact: '',
+          currentPlan: '',
+          billing: ''
+        }))
+        setUserData(mappedUsers)
+      } catch (err: any) {
+        setError(err.message || 'خطا در دریافت لیست نقش‌ها')
+        console.error('Error fetching roles:', err)
+      } finally {
+        setLoading(false)
+      }
+    }
+    fetchRoles()
+  }, [])
+
+  if (loading) {
+    return (
+      <Box className='flex items-center justify-center bs-full'>
+        <CircularProgress />
+      </Box>
+    )
+  }
+
+  if (error) {
+    return (
+      <Box className='flex items-center justify-center bs-full'>
+        <Typography color='error'>{error}</Typography>
+      </Box>
+    )
+  }
+
+  return <Roles userData={userData} />
+}
+
+export default RolesApp

src/app/(dashboard)/(private)/apps/user/list/page.tsx

@@ -0,0 +1,58 @@
+'use client'
+
+// React Imports
+import { useEffect, useState } from 'react'
+
+// MUI Imports
+import CircularProgress from '@mui/material/CircularProgress'
+import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography'
+
+// Component Imports
+import UserList from '@views/apps/user/list'
+
+// API Imports
+import { userManagementService } from '@/libs/api'
+import type { User } from '@/libs/api/services/userManagementService'
+
+const UserListApp = () => {
+  const [users, setUsers] = useState<User[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    const fetchUsers = async () => {
+      try {
+        setLoading(true)
+        const response = await userManagementService.getUsers()
+        setUsers(response.users)
+      } catch (err: any) {
+        setError(err.message || 'خطا در دریافت لیست کاربران')
+        console.error('Error fetching users:', err)
+      } finally {
+        setLoading(false)
+      }
+    }
+    fetchUsers()
+  }, [])
+
+  if (loading) {
+    return (
+      <Box className='flex items-center justify-center bs-full'>
+        <CircularProgress />
+      </Box>
+    )
+  }
+
+  if (error) {
+    return (
+      <Box className='flex items-center justify-center bs-full'>
+        <Typography color='error'>{error}</Typography>
+      </Box>
+    )
+  }
+
+  return <UserList userData={users} />
+}
+
+export default UserListApp

src/app/(dashboard)/(private)/apps/user/view/page.tsx

@@ -0,0 +1,95 @@
+'use client'
+
+// React Imports
+import { useEffect, useState, type ReactElement } from 'react'
+import { useSearchParams } from 'next/navigation'
+
+// Next Imports
+import dynamic from 'next/dynamic'
+
+// MUI Imports
+import Grid from '@mui/material/Grid2'
+import CircularProgress from '@mui/material/CircularProgress'
+import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography'
+
+// Type Imports
+import type { PricingPlanType } from '@/types/pages/pricingTypes'
+
+// Component Imports
+import UserLeftOverview from '@views/apps/user/view/user-left-overview'
+import UserRight from '@views/apps/user/view/user-right'
+
+// API Imports
+import { userManagementService } from '@/libs/api'
+import type { UserDetails } from '@/libs/api/services/userManagementService'
+
+const OverViewTab = dynamic(() => import('@views/apps/user/view/user-right/overview'))
+const SecurityTab = dynamic(() => import('@views/apps/user/view/user-right/security'))
+const BillingPlans = dynamic(() => import('@views/apps/user/view/user-right/billing-plans'))
+const NotificationsTab = dynamic(() => import('@views/apps/user/view/user-right/notifications'))
+const ConnectionsTab = dynamic(() => import('@views/apps/user/view/user-right/connections'))
+
+// Vars
+const tabContentList = (data?: PricingPlanType[]): { [key: string]: ReactElement } => ({
+  overview: <OverViewTab />,
+  security: <SecurityTab />,
+  'billing-plans': <BillingPlans data={data} />,
+  notifications: <NotificationsTab />,
+  connections: <ConnectionsTab />
+})
+
+const UserViewTab = () => {
+  const searchParams = useSearchParams()
+  const userId = searchParams.get('id') || '1' // Default to 1 if no ID provided
+  const [userData, setUserData] = useState<UserDetails | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    const fetchUser = async () => {
+      try {
+        setLoading(true)
+        const user = await userManagementService.getUser(parseInt(userId))
+        setUserData(user)
+      } catch (err: any) {
+        setError(err.message || 'خطا در دریافت اطلاعات کاربر')
+        console.error('Error fetching user:', err)
+      } finally {
+        setLoading(false)
+      }
+    }
+    if (userId) {
+      fetchUser()
+    }
+  }, [userId])
+
+  if (loading) {
+    return (
+      <Box className='flex items-center justify-center bs-full'>
+        <CircularProgress />
+      </Box>
+    )
+  }
+
+  if (error || !userData) {
+    return (
+      <Box className='flex items-center justify-center bs-full'>
+        <Typography color='error'>{error || 'کاربر یافت نشد'}</Typography>
+      </Box>
+    )
+  }
+
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12, lg: 4, md: 5 }}>
+        <UserLeftOverview />
+      </Grid>
+      <Grid size={{ xs: 12, lg: 8, md: 7 }}>
+        <UserRight tabContentList={tabContentList(undefined)} />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default UserViewTab

src/app/(dashboard)/(private)/charts/apex-charts/page.tsx

@@ -0,0 +1,72 @@
+// Next Imports
+import Link from 'next/link'
+
+// MUI Imports
+import Grid from '@mui/material/Grid2'
+import Typography from '@mui/material/Typography'
+
+// Component Imports
+import ApexBarChart from '@views/charts/apex/ApexBarChart'
+import ApexAreaChart from '@views/charts/apex/ApexAreaChart'
+import ApexLineChart from '@views/charts/apex/ApexLineChart'
+import ApexRadarChart from '@views/charts/apex/ApexRadarChart'
+import ApexDonutChart from '@views/charts/apex/ApexDonutChart'
+import ApexColumnChart from '@views/charts/apex/ApexColumnChart'
+import ApexScatterChart from '@views/charts/apex/ApexScatterChart'
+import ApexHeatmapChart from '@views/charts/apex/ApexHeatmapChart'
+import ApexRadialBarChart from '@views/charts/apex/ApexRadialBarChart'
+import ApexCandlestickChart from '@views/charts/apex/ApexCandlestickChart'
+
+const ApexCharts = () => {
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12 }}>
+        <Typography variant='h4'>ApexCharts</Typography>
+        <Typography>
+          <code>react-apexcharts</code> is a third-party library. Please refer to its{' '}
+          <Link
+            href='https://apexcharts.com'
+            target='_blank'
+            rel='noopener noreferrer'
+            className='no-underline text-primary'
+          >
+            official documentation
+          </Link>{' '}
+          for more details.
+        </Typography>
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <ApexAreaChart />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <ApexColumnChart />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <ApexScatterChart />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <ApexLineChart />
+      </Grid>
+      <Grid size={{ xs: 12, md: 6 }}>
+        <ApexBarChart />
+      </Grid>
+      <Grid size={{ xs: 12, md: 6 }}>
+        <ApexCandlestickChart />
+      </Grid>
+      <Grid size={{ xs: 12, md: 6 }}>
+        <ApexHeatmapChart />
+      </Grid>
+      <Grid size={{ xs: 12, md: 6 }}>
+        <ApexRadialBarChart />
+      </Grid>
+      <Grid size={{ xs: 12, md: 6 }}>
+        <ApexRadarChart />
+      </Grid>
+      <Grid size={{ xs: 12, md: 6 }}>
+        <ApexDonutChart />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default ApexCharts

src/app/(dashboard)/(private)/charts/recharts/page.tsx

@@ -0,0 +1,56 @@
+// Next Imports
+import Link from 'next/link'
+
+// MUI Imports
+import Grid from '@mui/material/Grid2'
+import Typography from '@mui/material/Typography'
+
+// Component Imports
+import RechartsBarChart from '@views/charts/recharts/RechartsBarChart'
+import RechartsPieChart from '@views/charts/recharts/RechartsPieChart'
+import RechartsLineChart from '@views/charts/recharts/RechartsLineChart'
+import RechartsAreaChart from '@views/charts/recharts/RechartsAreaChart'
+import RechartsRadarChart from '@views/charts/recharts/RechartsRadarChart'
+import RechartsScatterChart from '@views/charts/recharts/RechartsScatterChart'
+
+const Recharts = () => {
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12 }}>
+        <Typography variant='h4'>Recharts</Typography>
+        <Typography>
+          <code>recharts</code> is a third-party library. Please refer to its{' '}
+          <Link
+            href='https://recharts.org'
+            target='_blank'
+            rel='noopener noreferrer'
+            className='no-underline text-primary'
+          >
+            official documentation
+          </Link>{' '}
+          for more details.
+        </Typography>
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <RechartsLineChart />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <RechartsAreaChart />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <RechartsScatterChart />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <RechartsBarChart />
+      </Grid>
+      <Grid size={{ xs: 12, md: 6 }}>
+        <RechartsRadarChart />
+      </Grid>
+      <Grid size={{ xs: 12, md: 6 }}>
+        <RechartsPieChart />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default Recharts

src/app/(dashboard)/(private)/dashboard/page.tsx

@@ -0,0 +1,9 @@
+// Component Imports
+import AcademyDashboard from '../apps/academy/dashboard/page'
+
+const Dashboard = async () => {
+  return <AcademyDashboard />
+}
+
+export default Dashboard
+

src/app/(dashboard)/(private)/dashboards/academy/page.tsx

@@ -0,0 +1,8 @@
+// Component Imports
+import AcademyDashboard from '../../apps/academy/dashboard/page'
+
+const DashboardAcademy = async () => {
+  return <AcademyDashboard />
+}
+
+export default DashboardAcademy

src/app/(dashboard)/(private)/dashboards/analytics/page.tsx

@@ -0,0 +1,58 @@
+// MUI Imports
+import Grid from '@mui/material/Grid2'
+
+// Components Imports
+import WebsiteAnalyticsSlider from '@views/dashboards/analytics/WebsiteAnalyticsSlider'
+import LineAreaDailySalesChart from '@views/dashboards/analytics/LineAreaDailySalesChart'
+import SalesOverview from '@views/dashboards/analytics/SalesOverview'
+import EarningReports from '@views/dashboards/analytics/EarningReports'
+import SupportTracker from '@views/dashboards/analytics/SupportTracker'
+import SalesByCountries from '@views/dashboards/analytics/SalesByCountries'
+import TotalEarning from '@views/dashboards/analytics/TotalEarning'
+import MonthlyCampaignState from '@views/dashboards/analytics/MonthlyCampaignState'
+import SourceVisits from '@views/dashboards/analytics/SourceVisits'
+import ProjectsTable from '@views/dashboards/analytics/ProjectsTable'
+
+// TODO: Connect to backend API when analytics service is available
+
+const DashboardAnalytics = async () => {
+  // TODO: Fetch data from backend API when analytics service is available
+  const data = undefined
+
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12, lg: 6 }}>
+        <WebsiteAnalyticsSlider />
+      </Grid>
+      <Grid size={{ xs: 12, sm: 6, lg: 3 }}>
+        <LineAreaDailySalesChart />
+      </Grid>
+      <Grid size={{ xs: 12, sm: 6, lg: 3 }}>
+        <SalesOverview />
+      </Grid>
+      <Grid size={{ xs: 12, md: 6 }}>
+        <EarningReports />
+      </Grid>
+      <Grid size={{ xs: 12, md: 6 }}>
+        <SupportTracker />
+      </Grid>
+      <Grid size={{ xs: 12, md: 6, lg: 4 }}>
+        <SalesByCountries />
+      </Grid>
+      <Grid size={{ xs: 12, md: 6, lg: 4 }}>
+        <TotalEarning />
+      </Grid>
+      <Grid size={{ xs: 12, md: 6, lg: 4 }}>
+        <MonthlyCampaignState />
+      </Grid>
+      <Grid size={{ xs: 12, md: 6, lg: 4 }}>
+        <SourceVisits />
+      </Grid>
+      <Grid size={{ xs: 12, lg: 8 }}>
+        <ProjectsTable projectTable={undefined} />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default DashboardAnalytics

src/app/(dashboard)/(private)/dashboards/crm/page.tsx

@@ -0,0 +1,88 @@
+// MUI Imports
+import Grid from '@mui/material/Grid2'
+
+// Component Imports
+import DistributedBarChartOrder from '@views/dashboards/crm/DistributedBarChartOrder'
+import LineAreaYearlySalesChart from '@views/dashboards/crm/LineAreaYearlySalesChart'
+import CardStatVertical from '@/components/card-statistics/Vertical'
+import BarChartRevenueGrowth from '@views/dashboards/crm/BarChartRevenueGrowth'
+import EarningReportsWithTabs from '@views/dashboards/crm/EarningReportsWithTabs'
+import RadarSalesChart from '@views/dashboards/crm/RadarSalesChart'
+import SalesByCountries from '@views/dashboards/crm/SalesByCountries'
+import ProjectStatus from '@views/dashboards/crm/ProjectStatus'
+import ActiveProjects from '@views/dashboards/crm/ActiveProjects'
+import LastTransaction from '@views/dashboards/crm/LastTransaction'
+import ActivityTimeline from '@views/dashboards/crm/ActivityTimeline'
+
+// Server Action Imports
+import { getServerMode } from '@core/utils/serverHelpers'
+
+const DashboardCRM = async () => {
+  // Vars
+  const serverMode = await getServerMode()
+
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12, sm: 6, md: 4, lg: 2 }}>
+        <DistributedBarChartOrder />
+      </Grid>
+      <Grid size={{ xs: 12, sm: 6, md: 4, lg: 2 }}>
+        <LineAreaYearlySalesChart />
+      </Grid>
+      <Grid size={{ xs: 12, sm: 6, md: 4, lg: 2 }}>
+        <CardStatVertical
+          title='Total Profit'
+          subtitle='Last Week'
+          stats='1.28k'
+          avatarColor='error'
+          avatarIcon='tabler-credit-card'
+          avatarSkin='light'
+          avatarSize={44}
+          chipText='-12.2%'
+          chipColor='error'
+          chipVariant='tonal'
+        />
+      </Grid>
+      <Grid size={{ xs: 12, sm: 6, md: 4, lg: 2 }}>
+        <CardStatVertical
+          title='Total Sales'
+          subtitle='Last Week'
+          stats='24.67k'
+          avatarColor='success'
+          avatarIcon='tabler-currency-dollar'
+          avatarSkin='light'
+          avatarSize={44}
+          chipText='+24.67%'
+          chipColor='success'
+          chipVariant='tonal'
+        />
+      </Grid>
+      <Grid size={{ xs: 12, md: 8, lg: 4 }}>
+        <BarChartRevenueGrowth />
+      </Grid>
+      <Grid size={{ xs: 12, lg: 8 }}>
+        <EarningReportsWithTabs />
+      </Grid>
+      <Grid size={{ xs: 12, md: 6, lg: 4 }}>
+        <RadarSalesChart />
+      </Grid>
+      <Grid size={{ xs: 12, md: 6, lg: 4 }}>
+        <SalesByCountries />
+      </Grid>
+      <Grid size={{ xs: 12, md: 6, lg: 4 }}>
+        <ProjectStatus />
+      </Grid>
+      <Grid size={{ xs: 12, md: 6, lg: 4 }}>
+        <ActiveProjects />
+      </Grid>
+      <Grid size={{ xs: 12, md: 6 }}>
+        <LastTransaction serverMode={serverMode} />
+      </Grid>
+      <Grid size={{ xs: 12, md: 6 }}>
+        <ActivityTimeline />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default DashboardCRM

src/app/(dashboard)/(private)/dashboards/ecommerce/page.tsx

@@ -0,0 +1,7 @@
+import EcommerceDashboard from '../../apps/ecommerce/dashboard/page'
+
+const DashboardECommerce = () => {
+  return <EcommerceDashboard />
+}
+
+export default DashboardECommerce

src/app/(dashboard)/(private)/dashboards/logistics/page.tsx

@@ -0,0 +1,7 @@
+import LogisticsDashboard from '../../apps/logistics/dashboard/page'
+
+const DashboardLogistics = () => {
+  return <LogisticsDashboard />
+}
+
+export default DashboardLogistics

src/app/(dashboard)/(private)/forms/form-layouts/page.tsx

@@ -0,0 +1,44 @@
+// MUI Imports
+import Grid from '@mui/material/Grid2'
+import Typography from '@mui/material/Typography'
+
+// Component Imports
+import FormLayoutsBasic from '@views/forms/form-layouts/FormLayoutsBasic'
+import FormLayoutsIcon from '@views/forms/form-layouts/FormLayoutsIcons'
+import FormLayoutsSeparator from '@views/forms/form-layouts/FormLayoutsSeparator'
+import FormLayoutsTabs from '@views/forms/form-layouts/FormLayoutsTabs'
+import FormLayoutsCollapsible from '@views/forms/form-layouts/FormLayoutsCollapsible'
+import FormLayoutsAlignment from '@views/forms/form-layouts/FormLayoutsAlignment'
+
+const FormLayouts = () => {
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12, md: 6 }}>
+        <FormLayoutsBasic />
+      </Grid>
+      <Grid size={{ xs: 12, md: 6 }}>
+        <FormLayoutsIcon />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <FormLayoutsSeparator />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <Typography variant='h5'>Form with Tabs</Typography>
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <FormLayoutsTabs />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <Typography variant='h5'>Collapsible Sections</Typography>
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <FormLayoutsCollapsible />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <FormLayoutsAlignment />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default FormLayouts

src/app/(dashboard)/(private)/forms/form-validation/page.tsx

@@ -0,0 +1,44 @@
+// Next Imports
+import Link from 'next/link'
+
+// MUI Imports
+import Grid from '@mui/material/Grid2'
+import Typography from '@mui/material/Typography'
+
+// Component Imports
+import FormValidationBasic from '@views/forms/form-validation/FormValidationBasic'
+import FormValidationOnSchema from '@views/forms/form-validation/FormValidationSchema'
+import FormValidationAsyncSubmit from '@views/forms/form-validation/FormValidationAsyncSubmit'
+
+const FormValidation = () => {
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12 }}>
+        <Typography variant='h4'>React Hook Form</Typography>
+        <Typography>
+          <code>react-hook-form</code> is a third-party library. Please refer to its{' '}
+          <Link
+            href='https://react-hook-form.com'
+            target='_blank'
+            rel='noopener noreferrer'
+            className='no-underline text-primary'
+          >
+            official documentation
+          </Link>{' '}
+          for more details.
+        </Typography>
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <FormValidationBasic />
+      </Grid>
+      <Grid size={{ xs: 12, md: 6 }}>
+        <FormValidationOnSchema />
+      </Grid>
+      <Grid size={{ xs: 12, md: 6 }}>
+        <FormValidationAsyncSubmit />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default FormValidation

src/app/(dashboard)/(private)/forms/form-wizard/page.tsx

@@ -0,0 +1,77 @@
+// Next Imports
+import Link from 'next/link'
+
+// MUI Imports
+import Grid from '@mui/material/Grid2'
+import Typography from '@mui/material/Typography'
+
+// Component Imports
+import StepperLinearWithValidation from '@views/forms/form-wizard/StepperLinearWithValidation'
+import StepperAlternativeLabel from '@views/forms/form-wizard/StepperAlternativeLabel'
+import StepperVerticalWithNumbers from '@views/forms/form-wizard/StepperVerticalWithNumbers'
+import StepperVerticalWithoutNumbers from '@views/forms/form-wizard/StepperVerticalWithoutNumbers'
+import StepperCustomHorizontal from '@views/forms/form-wizard/StepperCustomHorizontal'
+import StepperCustomVertical from '@views/forms/form-wizard/StepperCustomVertical'
+
+const FormWizard = () => {
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12 }}>
+        <Typography variant='h4'>Stepper</Typography>
+        <Typography>
+          Please refer to MUI&#39;s official docs for more details on component&#39;s{' '}
+          <Link
+            href='https://mui.com/material-ui/react-stepper'
+            target='_blank'
+            rel='noopener noreferrer'
+            className='no-underline text-primary'
+          >
+            usage guide
+          </Link>{' '}
+          and{' '}
+          <Link
+            href='https://mui.com/material-ui/react-stepper/#api'
+            target='_blank'
+            rel='noopener noreferrer'
+            className='no-underline text-primary'
+          >
+            API documentation
+          </Link>
+          .
+        </Typography>
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <Typography variant='h5'>Linear Stepper with Validation</Typography>
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <StepperLinearWithValidation />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <Typography variant='h5'>Alternative Label</Typography>
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <StepperAlternativeLabel />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <StepperVerticalWithNumbers />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <StepperVerticalWithoutNumbers />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <Typography variant='h5'>Custom Horizontal Stepper</Typography>
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <StepperCustomHorizontal />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <Typography variant='h5'>Custom Vertical Stepper</Typography>
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <StepperCustomVertical />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default FormWizard

src/app/(dashboard)/(private)/layout.tsx

@@ -0,0 +1,63 @@
+// MUI Imports
+import Button from '@mui/material/Button'
+
+// Type Imports
+import type { ChildrenType } from '@core/types'
+
+// Layout Imports
+import LayoutWrapper from '@layouts/LayoutWrapper'
+import VerticalLayout from '@layouts/VerticalLayout'
+import HorizontalLayout from '@layouts/HorizontalLayout'
+
+// Component Imports
+import Providers from '@components/Providers'
+import Navigation from '@components/layout/vertical/Navigation'
+import Header from '@components/layout/horizontal/Header'
+import Navbar from '@components/layout/vertical/Navbar'
+import ScrollToTop from '@core/components/scroll-to-top'
+import AuthGuard from '@/hocs/AuthGuard'
+
+// Util Imports
+import { getMode, getSystemMode } from '@core/utils/serverHelpers'
+
+const Layout = async (props: ChildrenType) => {
+  const { children } = props
+
+  // Vars
+  const direction = 'rtl' // Fixed RTL direction
+  const mode = await getMode()
+  const systemMode = await getSystemMode()
+
+  return (
+    <Providers direction={direction}>
+      <AuthGuard>
+        <LayoutWrapper
+          systemMode={systemMode}
+          verticalLayout={
+            <VerticalLayout
+              navigation={<Navigation mode={mode} />}
+              navbar={<Navbar />}
+            >
+              {children}
+            </VerticalLayout>
+          }
+          horizontalLayout={
+            <HorizontalLayout header={<Header />}>
+              {children}
+            </HorizontalLayout>
+          }
+        />
+        <ScrollToTop className='mui-fixed'>
+          <Button
+            variant='contained'
+            className='is-10 bs-10 rounded-full p-0 min-is-0 flex items-center justify-center'
+          >
+            <i className='tabler-arrow-up' />
+          </Button>
+        </ScrollToTop>
+      </AuthGuard>
+    </Providers>
+  )
+}
+
+export default Layout

src/app/(dashboard)/(private)/pages/account-settings/page.tsx

@@ -0,0 +1,29 @@
+// React Imports
+import type { ReactElement } from 'react'
+
+// Next Imports
+import dynamic from 'next/dynamic'
+
+// Component Imports
+import AccountSettings from '@views/pages/account-settings'
+
+const AccountTab = dynamic(() => import('@views/pages/account-settings/account'))
+const SecurityTab = dynamic(() => import('@views/pages/account-settings/security'))
+const BillingPlansTab = dynamic(() => import('@views/pages/account-settings/billing-plans'))
+const NotificationsTab = dynamic(() => import('@views/pages/account-settings/notifications'))
+const ConnectionsTab = dynamic(() => import('@views/pages/account-settings/connections'))
+
+// Vars
+const tabContentList = (): { [key: string]: ReactElement } => ({
+  account: <AccountTab />,
+  security: <SecurityTab />,
+  'billing-plans': <BillingPlansTab />,
+  notifications: <NotificationsTab />,
+  connections: <ConnectionsTab />
+})
+
+const AccountSettingsPage = () => {
+  return <AccountSettings tabContentList={tabContentList()} />
+}
+
+export default AccountSettingsPage

src/app/(dashboard)/(private)/pages/dialog-examples/page.tsx

@@ -0,0 +1,58 @@
+// MUI Imports
+import Grid from '@mui/material/Grid2'
+
+// Component Imports
+import DialogAddCard from '@views/pages/dialog-examples/DialogAddCard'
+import DialogEditUserInfo from '@views/pages/dialog-examples/DialogEditUserInfo'
+import DialogAuthentication from '@views/pages/dialog-examples/DialogAuthentication'
+import DialogAddNewAddress from '@views/pages/dialog-examples/DialogAddNewAddress'
+import DialogShareProject from '@views/pages/dialog-examples/DialogShareProject'
+import DialogReferEarn from '@views/pages/dialog-examples/DialogReferEarn'
+import DialogPaymentMethod from '@views/pages/dialog-examples/DialogPaymentMethod'
+import DialogPaymentProviders from '@views/pages/dialog-examples/DialogPaymentProviders'
+import DialogCreateApp from '@views/pages/dialog-examples/DialogCreateApp'
+import DialogPricing from '@views/pages/dialog-examples/DialogPricing'
+
+// TODO: Connect to backend API when pricing service is available
+
+const DialogExamples = async () => {
+  // TODO: Fetch data from backend API when pricing service is available
+  const data = undefined
+
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12, sm: 6, md: 4 }}>
+        <DialogAddCard />
+      </Grid>
+      <Grid size={{ xs: 12, sm: 6, md: 4 }}>
+        <DialogEditUserInfo />
+      </Grid>
+      <Grid size={{ xs: 12, sm: 6, md: 4 }}>
+        <DialogAuthentication />
+      </Grid>
+      <Grid size={{ xs: 12, sm: 6, md: 4 }}>
+        <DialogAddNewAddress />
+      </Grid>
+      <Grid size={{ xs: 12, sm: 6, md: 4 }}>
+        <DialogShareProject />
+      </Grid>
+      <Grid size={{ xs: 12, sm: 6, md: 4 }}>
+        <DialogReferEarn />
+      </Grid>
+      <Grid size={{ xs: 12, sm: 6, md: 4 }}>
+        <DialogPaymentMethod />
+      </Grid>
+      <Grid size={{ xs: 12, sm: 6, md: 4 }}>
+        <DialogPaymentProviders />
+      </Grid>
+      <Grid size={{ xs: 12, sm: 6, md: 4 }}>
+        <DialogPricing data={data} />
+      </Grid>
+      <Grid size={{ xs: 12, sm: 6, md: 4 }}>
+        <DialogCreateApp />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default DialogExamples

src/app/(dashboard)/(private)/pages/faq/page.tsx

@@ -0,0 +1,31 @@
+// Component Imports
+import FAQ from '@views/pages/faq'
+
+// TODO: Connect to backend API when FAQ service is available
+
+/**
+ * ! If you need data using an API call, uncomment the below API code, update the `process.env.API_URL` variable in the
+ * ! `.env` file found at root of your project and also update the API endpoints like `/pages/faq` in below example.
+ * ! Also, remove the above server action import and the action itself from the `src/app/server/actions.ts` file to clean up unused code
+ * ! because we've used the server action for getting our static data.
+ */
+
+/* const getFaqData = async () => {
+  // Vars
+  const res = await fetch(`${process.env.API_URL}/pages/faq`)
+
+  if (!res.ok) {
+    throw new Error('Failed to fetch faqData')
+  }
+
+  return res.json()
+} */
+
+const FAQPage = async () => {
+  // TODO: Fetch data from backend API when FAQ service is available
+  const data = undefined
+
+  return <FAQ data={data} />
+}
+
+export default FAQPage

src/app/(dashboard)/(private)/pages/pricing/page.tsx

@@ -0,0 +1,31 @@
+// Component Imports
+import Pricing from '@views/pages/pricing'
+
+// TODO: Connect to backend API when pricing service is available
+
+/**
+ * ! If you need data using an API call, uncomment the below API code, update the `process.env.API_URL` variable in the
+ * ! `.env` file found at root of your project and also update the API endpoints like `/pages/pricing` in below example.
+ * ! Also, remove the above server action import and the action itself from the `src/app/server/actions.ts` file to clean up unused code
+ * ! because we've used the server action for getting our static data.
+ */
+
+/* const getPricingData = async () => {
+  // Vars
+  const res = await fetch(`${process.env.API_URL}/pages/pricing`)
+
+  if (!res.ok) {
+    throw new Error('Failed to fetch data')
+  }
+
+  return res.json()
+} */
+
+const PricePage = async () => {
+  // TODO: Fetch data from backend API when pricing service is available
+  const data = undefined
+
+  return <Pricing data={data} />
+}
+
+export default PricePage

src/app/(dashboard)/(private)/pages/user-profile/page.tsx

@@ -0,0 +1,53 @@
+// React Imports
+import type { ReactElement } from 'react'
+
+// Next Imports
+import dynamic from 'next/dynamic'
+
+// Type Imports
+import type { Data } from '@/types/pages/profileTypes'
+
+// Component Imports
+import UserProfile from '@views/pages/user-profile'
+
+// TODO: Connect to backend API when profile service is available
+
+const ProfileTab = dynamic(() => import('@views/pages/user-profile/profile'))
+const TeamsTab = dynamic(() => import('@views/pages/user-profile/teams'))
+const ProjectsTab = dynamic(() => import('@views/pages/user-profile/projects'))
+const ConnectionsTab = dynamic(() => import('@views/pages/user-profile/connections'))
+
+// Vars
+const tabContentList = (data?: Data): { [key: string]: ReactElement } => ({
+  profile: <ProfileTab data={data?.users.profile} />,
+  teams: <TeamsTab data={data?.users.teams} />,
+  projects: <ProjectsTab data={data?.users.projects} />,
+  connections: <ConnectionsTab data={data?.users.connections} />
+})
+
+/**
+ * ! If you need data using an API call, uncomment the below API code, update the `process.env.API_URL` variable in the
+ * ! `.env` file found at root of your project and also update the API endpoints like `/pages/profile` in below example.
+ * ! Also, remove the above server action import and the action itself from the `src/app/server/actions.ts` file to clean up unused code
+ * ! because we've used the server action for getting our static data.
+ */
+
+/* const getProfileData = async () => {
+  // Vars
+  const res = await fetch(`${process.env.API_URL}/pages/profile`)
+
+  if (!res.ok) {
+    throw new Error('Failed to fetch profileData')
+  }
+
+  return res.json()
+} */
+
+const ProfilePage = async () => {
+  // TODO: Fetch data from backend API when profile service is available
+  const data = undefined
+
+  return <UserProfile data={data} tabContentList={tabContentList(data)} />
+}
+
+export default ProfilePage

src/app/(dashboard)/(private)/pages/widget-examples/actions/page.tsx

@@ -0,0 +1,33 @@
+// MUI Imports
+import Grid from '@mui/material/Grid2'
+
+// Components Imports
+import CardActionsTable from '@views/pages/widget-examples/actions/Table'
+import CardActionCollapsible from '@views/pages/widget-examples/actions/Collapsible'
+import CardActionRefreshContent from '@views/pages/widget-examples/actions/RefreshContent'
+import CardActionRemoveCard from '@views/pages/widget-examples/actions/RemoveCard'
+import CardActionAll from '@views/pages/widget-examples/actions/AllActions'
+
+const Actions = () => {
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12 }}>
+        <CardActionsTable />
+      </Grid>
+      <Grid size={{ xs: 12, md: 6 }}>
+        <CardActionCollapsible />
+      </Grid>
+      <Grid size={{ xs: 12, md: 6 }}>
+        <CardActionRefreshContent />
+      </Grid>
+      <Grid size={{ xs: 12, md: 6 }}>
+        <CardActionRemoveCard />
+      </Grid>
+      <Grid size={{ xs: 12, md: 6 }}>
+        <CardActionAll />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default Actions

src/app/(dashboard)/(private)/pages/widget-examples/advanced/page.tsx

@@ -0,0 +1,95 @@
+// MUI Imports
+import Grid from '@mui/material/Grid2'
+
+// Components Imports
+import MonthlyCampaignState from '@views/pages/widget-examples/advanced/MonthlyCampaignState'
+import ActiveProjects from '@views/pages/widget-examples/advanced/ActiveProjects'
+import SourceVisits from '@views/pages/widget-examples/advanced/SourceVisits'
+import SalesByCountries from '@views/pages/widget-examples/advanced/SalesByCountries'
+import EarningReports from '@views/pages/widget-examples/advanced/EarningReports'
+import BrowserStates from '@views/pages/widget-examples/advanced/BrowserStates'
+import Orders from '@views/pages/widget-examples/advanced/Orders'
+import Transactions from '@views/pages/widget-examples/advanced/Transactions'
+import PopularProducts from '@views/pages/widget-examples/advanced/PopularProducts'
+import TopCourses from '@views/pages/widget-examples/advanced/TopCourses'
+import UpcomingWebinar from '@views/pages/widget-examples/advanced/UpcomingWebinar'
+import AssignmentProgress from '@views/pages/widget-examples/advanced/AssignmentProgress'
+import DeliveryPerformance from '@views/pages/widget-examples/advanced/DeliveryPerformance'
+import VehicleCondition from '@views/pages/widget-examples/advanced/VehicleCondition'
+import PopularInstructors from '@views/pages/widget-examples/advanced/PopularInstructors'
+import LastTransaction from '@views/pages/widget-examples/advanced/LastTransaction'
+import ActivityTimeline from '@views/pages/widget-examples/advanced/ActivityTimeline'
+import WebsiteAnalyticsSlider from '@views/pages/widget-examples/advanced/WebsiteAnalyticsSlider'
+import Congratulations from '@/views/pages/widget-examples/advanced/Congratulations'
+
+// Server Action Imports
+import { getServerMode } from '@core/utils/serverHelpers'
+
+const Advanced = async () => {
+  // Vars
+  const serverMode = await getServerMode()
+
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12, md: 6, lg: 4 }}>
+        <MonthlyCampaignState />
+      </Grid>
+      <Grid size={{ xs: 12, md: 6, lg: 4 }}>
+        <ActiveProjects />
+      </Grid>
+      <Grid size={{ xs: 12, md: 6, lg: 4 }}>
+        <SourceVisits />
+      </Grid>
+      <Grid size={{ xs: 12, md: 6, lg: 4 }}>
+        <SalesByCountries />
+      </Grid>
+      <Grid size={{ xs: 12, md: 6, lg: 4 }}>
+        <EarningReports />
+      </Grid>
+      <Grid size={{ xs: 12, md: 6, lg: 4 }}>
+        <BrowserStates />
+      </Grid>
+      <Grid size={{ xs: 12, lg: 4 }}>
+        <Orders />
+      </Grid>
+      <Grid size={{ xs: 12, md: 6, lg: 4 }}>
+        <Transactions />
+      </Grid>
+      <Grid size={{ xs: 12, md: 6, lg: 4 }}>
+        <PopularProducts />
+      </Grid>
+      <Grid size={{ xs: 12, md: 6, lg: 4 }}>
+        <TopCourses />
+      </Grid>
+      <Grid size={{ xs: 12, md: 6, lg: 4 }}>
+        <UpcomingWebinar />
+      </Grid>
+      <Grid size={{ xs: 12, md: 6, lg: 4 }}>
+        <AssignmentProgress />
+      </Grid>
+      <Grid size={{ xs: 12, md: 6, lg: 4 }}>
+        <DeliveryPerformance />
+      </Grid>
+      <Grid size={{ xs: 12, md: 6, lg: 4 }}>
+        <VehicleCondition />
+      </Grid>
+      <Grid size={{ xs: 12, md: 6, lg: 4 }}>
+        <PopularInstructors />
+      </Grid>
+      <Grid size={{ xs: 12, md: 6 }}>
+        <LastTransaction serverMode={serverMode} />
+      </Grid>
+      <Grid size={{ xs: 12, md: 6 }}>
+        <ActivityTimeline />
+      </Grid>
+      <Grid size={{ xs: 12, md: 6 }}>
+        <WebsiteAnalyticsSlider />
+      </Grid>
+      <Grid size={{ xs: 12, md: 6 }}>
+        <Congratulations />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default Advanced

src/app/(dashboard)/(private)/pages/widget-examples/basic/page.tsx

@@ -0,0 +1,87 @@
+// MUI Imports
+import Grid from '@mui/material/Grid2'
+import Typography from '@mui/material/Typography'
+import Divider from '@mui/material/Divider'
+
+// Components Imports
+import CardInfluencingInfluencerWithImg from '@views/pages/widget-examples/basic/CardInfluencingInfluencerWithImg'
+import CardUser from '@views/pages/widget-examples/basic/CardUser'
+import CardWithCollapse from '@views/pages/widget-examples/basic/CardWithCollapse'
+import CardMobile from '@views/pages/widget-examples/basic/CardMobile'
+import CardHorizontalRatings from '@views/pages/widget-examples/basic/CardHorizontalRatings'
+import CardWatch from '@views/pages/widget-examples/basic/CardWatch'
+import CardLifetimeMembership from '@views/pages/widget-examples/basic/CardLifetimeMembership'
+import CardInfluencingInfluencer from '@views/pages/widget-examples/basic/CardInfluencingInfluencer'
+import CardVerticalRatings from '@views/pages/widget-examples/basic/CardVerticalRatings'
+import CardSupport from '@views/pages/widget-examples/basic/CardSupport'
+import CardWithTabs from '@views/pages/widget-examples/basic/CardWithTabs'
+import CardWithTabsCenter from '@views/pages/widget-examples/basic/CardWithTabsCenter'
+import CardTwitter from '@views/pages/widget-examples/basic/CardTwitter'
+import CardFacebook from '@views/pages/widget-examples/basic/CardFacebook'
+import CardLinkedIn from '@views/pages/widget-examples/basic/CardLinkedIn'
+
+const Basic = () => {
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12 }}>
+        <Typography variant='h3'>Basic Cards</Typography>
+        <Divider />
+      </Grid>
+      <Grid size={{ xs: 12, sm: 6, md: 4 }}>
+        <CardInfluencingInfluencerWithImg />
+      </Grid>
+      <Grid size={{ xs: 12, sm: 6, md: 4 }}>
+        <CardUser />
+      </Grid>
+      <Grid size={{ xs: 12, sm: 6, md: 4 }}>
+        <CardWithCollapse />
+      </Grid>
+      <Grid size={{ xs: 12, sm: 6 }}>
+        <CardMobile />
+      </Grid>
+      <Grid size={{ xs: 12, sm: 6 }}>
+        <CardHorizontalRatings />
+      </Grid>
+      <Grid size={{ xs: 12, sm: 6, md: 4 }}>
+        <CardWatch />
+      </Grid>
+      <Grid size={{ xs: 12, md: 8 }}>
+        <CardLifetimeMembership />
+      </Grid>
+      <Grid size={{ xs: 12, sm: 6, md: 4 }}>
+        <CardInfluencingInfluencer />
+      </Grid>
+      <Grid size={{ xs: 12, sm: 6, md: 4 }}>
+        <CardVerticalRatings />
+      </Grid>
+      <Grid size={{ xs: 12, sm: 6, md: 4 }}>
+        <CardSupport />
+      </Grid>
+      <Grid size={{ xs: 12 }} className='pbs-12'>
+        <Typography variant='h3'>Navigation Cards</Typography>
+        <Divider />
+      </Grid>
+      <Grid size={{ xs: 12, md: 6 }}>
+        <CardWithTabs />
+      </Grid>
+      <Grid size={{ xs: 12, md: 6 }}>
+        <CardWithTabsCenter />
+      </Grid>
+      <Grid size={{ xs: 12 }} className='pbs-12'>
+        <Typography variant='h3'>Solid Cards</Typography>
+        <Divider />
+      </Grid>
+      <Grid size={{ xs: 12, sm: 6, md: 4 }}>
+        <CardTwitter />
+      </Grid>
+      <Grid size={{ xs: 12, sm: 6, md: 4 }}>
+        <CardFacebook />
+      </Grid>
+      <Grid size={{ xs: 12, sm: 6, md: 4 }}>
+        <CardLinkedIn />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default Basic

src/app/(dashboard)/(private)/pages/widget-examples/charts/page.tsx

@@ -0,0 +1,57 @@
+// MUI Imports
+import Grid from '@mui/material/Grid2'
+
+// Components Imports
+import EarningReports from '@views/pages/widget-examples/charts/EarningReports'
+import SupportTracker from '@views/pages/widget-examples/charts/SupportTracker'
+import Sales from '@views/pages/widget-examples/charts/Sales'
+import RevenueReport from '@views/pages/widget-examples/charts/RevenueReport'
+import ProjectStatus from '@views/pages/widget-examples/charts/ProjectStatus'
+import EarningReportsWithTabs from '@views/pages/widget-examples/charts/EarningReportsWithTabs'
+import TotalEarning from '@views/pages/widget-examples/charts/TotalEarning'
+import CarrierPerformance from '@views/pages/widget-examples/charts/CarrierPerformance'
+import DeliveryExceptions from '@views/pages/widget-examples/charts/DeliveryExceptions'
+import VehicleOverview from '@views/pages/widget-examples/charts/VehicleOverview'
+import InterestedTopics from '@views/pages/widget-examples/charts/InterestedTopics'
+
+const Charts = () => {
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12, md: 6 }}>
+        <EarningReports />
+      </Grid>
+      <Grid size={{ xs: 12, md: 6 }}>
+        <SupportTracker />
+      </Grid>
+      <Grid size={{ xs: 12, md: 4 }}>
+        <Sales />
+      </Grid>
+      <Grid size={{ xs: 12, md: 8 }}>
+        <RevenueReport />
+      </Grid>
+      <Grid size={{ xs: 12, md: 4 }}>
+        <ProjectStatus />
+      </Grid>
+      <Grid size={{ xs: 12, md: 8 }}>
+        <EarningReportsWithTabs />
+      </Grid>
+      <Grid size={{ xs: 12, md: 5, lg: 4 }}>
+        <TotalEarning />
+      </Grid>
+      <Grid size={{ xs: 12, md: 7, lg: 8 }}>
+        <CarrierPerformance />
+      </Grid>
+      <Grid size={{ xs: 12, md: 6, lg: 4 }}>
+        <DeliveryExceptions />
+      </Grid>
+      <Grid size={{ xs: 12, md: 6, lg: 8 }}>
+        <VehicleOverview />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <InterestedTopics />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default Charts

src/app/(dashboard)/(private)/pages/widget-examples/statistics/page.tsx

@@ -0,0 +1,105 @@
+// MUI Imports
+import Grid from '@mui/material/Grid2'
+
+// Component Imports
+import StatisticsCard from '@views/pages/widget-examples/statistics/StatisticsCard'
+import Square from '@views/pages/widget-examples/statistics/Square'
+import DistributedBarChartOrder from '@/views/pages/widget-examples/statistics/DistributedBarChartOrder'
+import LineAreaYearlySalesChart from '@views/pages/widget-examples/statistics/LineAreaYearlySalesChart'
+import LineChartProfit from '@views/pages/widget-examples/statistics/LineChartProfit'
+import BarChartSessionsWithNegativeValues from '@views/pages/widget-examples/statistics/BarChartSessionsWithNegativeValues'
+import RadialBarChart from '@views/pages/widget-examples/statistics/RadialBarChart'
+import LineChartImpression from '@views/pages/widget-examples/statistics/LineChartImpression'
+import Horizontal from '@views/pages/widget-examples/statistics/Horizontal'
+import CardStatsLineAreaCharts from '@views/pages/widget-examples/statistics/CardStatsLineAreaCharts'
+import LineAreaDailySalesChart from '@views/pages/widget-examples/statistics/LineAreaDailySalesChart'
+import SalesOverview from '@views/pages/widget-examples/statistics/SalesOverview'
+import BarChartDailyTraffic from '@views/pages/widget-examples/statistics/BarChartDailyTraffic'
+import SubscribersOrders from '@views/pages/widget-examples/statistics/SubscribersOrders'
+import Vertical from '@views/pages/widget-examples/statistics/Vertical'
+import BarChartRevenueGrowth from '@views/pages/widget-examples/statistics/BarChartRevenueGrowth'
+import DonutChartGeneratedLeads from '@views/pages/widget-examples/statistics/DonutChartGeneratedLeads'
+import HorizontalStatisticsCard from '@views/pages/widget-examples/statistics/HorizontalStatisticsCard'
+import CustomerStatisticsCard from '@views/pages/widget-examples/statistics/CustomerStatisticsCard'
+import LogisticsStatisticsCard from '@views/apps/logistics/dashboard/LogisticsStatisticsCard'
+import UserListCards from '@views/pages/widget-examples/statistics/UserListCards'
+
+// Data Imports
+import { getStatisticsData } from '@/app/server/actions'
+
+// TODO: Connect to backend API when statistics service is available
+
+const Statistics = async () => {
+  // TODO: Fetch data from backend API when statistics service is available
+  const statsData = await getStatisticsData()
+
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12, md: 8 }}>
+        <StatisticsCard />
+      </Grid>
+      <Grid size={{ xs: 12, md: 4 }}>
+        <Square data={statsData?.statsSquare} />
+      </Grid>
+      <Grid size={{ xs: 12, sm: 6, md: 4, lg: 2 }}>
+        <DistributedBarChartOrder />
+      </Grid>
+      <Grid size={{ xs: 12, sm: 6, md: 4, lg: 2 }}>
+        <LineAreaYearlySalesChart />
+      </Grid>
+      <Grid size={{ xs: 12, sm: 6, md: 4, lg: 2 }}>
+        <LineChartProfit />
+      </Grid>
+      <Grid size={{ xs: 12, sm: 6, md: 4, lg: 2 }}>
+        <BarChartSessionsWithNegativeValues />
+      </Grid>
+      <Grid size={{ xs: 12, sm: 6, md: 4, lg: 2 }}>
+        <RadialBarChart />
+      </Grid>
+      <Grid size={{ xs: 12, sm: 6, md: 4, lg: 2 }}>
+        <LineChartImpression />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <LogisticsStatisticsCard data={statsData?.statsHorizontalWithBorder} />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <UserListCards />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <Horizontal data={statsData?.statsHorizontal} />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <CardStatsLineAreaCharts data={statsData?.statsWithAreaChart} />
+      </Grid>
+      <Grid size={{ xs: 12, sm: 6, lg: 3 }}>
+        <LineAreaDailySalesChart />
+      </Grid>
+      <Grid size={{ xs: 12, sm: 6, lg: 3 }}>
+        <SalesOverview />
+      </Grid>
+      <Grid size={{ xs: 12, sm: 6, lg: 3 }}>
+        <BarChartDailyTraffic />
+      </Grid>
+      <Grid size={{ xs: 12, sm: 6, lg: 3 }}>
+        <SubscribersOrders />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <HorizontalStatisticsCard data={statsData?.statsHorizontalWithAvatar} />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <CustomerStatisticsCard customerStatData={statsData?.customerStats} />
+      </Grid>
+      <Grid size={{ xs: 12, md: 6, lg: 4 }}>
+        <Vertical data={statsData?.statsVertical} />
+      </Grid>
+      <Grid size={{ xs: 12, md: 6, lg: 4 }}>
+        <BarChartRevenueGrowth />
+      </Grid>
+      <Grid size={{ xs: 12, md: 6, lg: 4 }}>
+        <DonutChartGeneratedLeads />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default Statistics

src/app/(dashboard)/(private)/pages/wizard-examples/checkout/page.tsx

@@ -0,0 +1,8 @@
+// Component Imports
+import CheckoutWizard from '@views/pages/wizard-examples/checkout'
+
+const CheckoutPage = () => {
+  return <CheckoutWizard />
+}
+
+export default CheckoutPage

src/app/(dashboard)/(private)/pages/wizard-examples/create-deal/page.tsx

@@ -0,0 +1,8 @@
+// Component Imports
+import CreateDeal from '@views/pages/wizard-examples/create-deal'
+
+const CreateDealPage = () => {
+  return <CreateDeal />
+}
+
+export default CreateDealPage

src/app/(dashboard)/(private)/pages/wizard-examples/property-listing/page.tsx

@@ -0,0 +1,8 @@
+// Component Imports
+import PropertyListing from '@views/pages/wizard-examples/property-listing'
+
+const PropertyListingPage = () => {
+  return <PropertyListing />
+}
+
+export default PropertyListingPage

src/app/(dashboard)/(private)/react-table/page.tsx

@@ -0,0 +1,52 @@
+// Next Imports
+import Link from 'next/link'
+
+// MUI Imports
+import Grid from '@mui/material/Grid2'
+import Typography from '@mui/material/Typography'
+
+// Component imports
+import BasicDataTables from '@views/react-table/BasicDataTables'
+import EditableDataTables from '@views/react-table/EditableDataTables'
+import ColumnVisibility from '@views/react-table/ColumnVisibility'
+import RowSelection from '@views/react-table/RowSelection'
+import KitchenSink from '@views/react-table/KitchenSink'
+
+const Tables = () => {
+  return (
+    <Grid container spacing={6}>
+      <Grid size={{ xs: 12 }}>
+        <Typography variant='h4'>React Table</Typography>
+        <Typography>
+          <code>@tanstack/react-table</code> is a third-party library. Please refer to its{' '}
+          <Link
+            href='https://tanstack.com/table'
+            target='_blank'
+            rel='noopener noreferrer'
+            className='no-underline text-primary'
+          >
+            official documentation
+          </Link>{' '}
+          for more details.
+        </Typography>
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <BasicDataTables />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <EditableDataTables />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <ColumnVisibility />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <RowSelection />
+      </Grid>
+      <Grid size={{ xs: 12 }}>
+        <KitchenSink />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default Tables

src/app/(dashboard)/(private)/todo/all/page.tsx

@@ -0,0 +1,10 @@
+// Component Imports
+import TodoList from '@views/apps/todo/all'
+
+const TodoApp = async () => {
+  return <TodoList />
+}
+
+export default TodoApp
+
+

src/app/[...not-found]/page.tsx

@@ -0,0 +1,24 @@
+// Component Imports
+import Providers from '@components/Providers'
+import BlankLayout from '@layouts/BlankLayout'
+import NotFound from '@views/NotFound'
+
+// Util Imports
+import { getServerMode, getSystemMode } from '@core/utils/serverHelpers'
+
+const NotFoundPage = async () => {
+  // Vars
+  const direction = 'rtl' // Fixed RTL direction
+  const mode = await getServerMode()
+  const systemMode = await getSystemMode()
+
+  return (
+    <Providers direction={direction}>
+      <BlankLayout systemMode={systemMode}>
+        <NotFound mode={mode} />
+      </BlankLayout>
+    </Providers>
+  )
+}
+
+export default NotFoundPage

src/app/front-pages/checkout/page.tsx

@@ -0,0 +1,8 @@
+// Component Imports
+import Checkout from '@views/front-pages/CheckoutPage'
+
+const CheckoutPage = () => {
+  return <Checkout />
+}
+
+export default CheckoutPage

src/app/front-pages/help-center/article/how-to-add-product-in-cart/page.tsx

@@ -0,0 +1,8 @@
+// Component Imports
+import Questions from '@views/front-pages/help-center/Questions'
+
+const Article = () => {
+  return <Questions />
+}
+
+export default Article

src/app/front-pages/help-center/page.tsx

@@ -0,0 +1,8 @@
+// Component Imports
+import HelpCenterWrapper from '@views/front-pages/help-center'
+
+function HelpCenterPage() {
+  return <HelpCenterWrapper />
+}
+
+export default HelpCenterPage

src/app/front-pages/landing-page/page.tsx

@@ -0,0 +1,14 @@
+// Component Imports
+import LandingPageWrapper from '@views/front-pages/landing-page'
+
+// Server Action Imports
+import { getServerMode } from '@core/utils/serverHelpers'
+
+const LandingPage = async () => {
+  // Vars
+  const mode = await getServerMode()
+
+  return <LandingPageWrapper mode={mode} />
+}
+
+export default LandingPage

src/app/front-pages/layout.tsx

@@ -0,0 +1,64 @@
+// MUI Imports
+import Button from '@mui/material/Button'
+import InitColorSchemeScript from '@mui/material/InitColorSchemeScript'
+
+// Third-party Imports
+import 'react-perfect-scrollbar/dist/css/styles.css'
+
+// Type Imports
+import type { ChildrenType } from '@core/types'
+
+// Context Imports
+import { IntersectionProvider } from '@/contexts/intersectionContext'
+
+// Component Imports
+import Providers from '@components/Providers'
+import BlankLayout from '@layouts/BlankLayout'
+import FrontLayout from '@components/layout/front-pages'
+import ScrollToTop from '@core/components/scroll-to-top'
+
+// Util Imports
+import { getSystemMode } from '@core/utils/serverHelpers'
+
+// Style Imports
+import '@/app/globals.css'
+
+// Generated Icon CSS Imports
+import '@assets/iconify-icons/generated-icons.css'
+
+// Config Imports
+import { getMetadata } from '@configs/metadata'
+
+export const metadata = getMetadata()
+
+const Layout = async ({ children }: ChildrenType) => {
+  // Vars
+  const systemMode = await getSystemMode()
+
+  return (
+    <html id='__next' suppressHydrationWarning>
+      <body className='flex is-full min-bs-full flex-auto flex-col'>
+        <InitColorSchemeScript attribute='data' defaultMode={systemMode} />
+        <Providers direction='ltr'>
+          <BlankLayout systemMode={systemMode}>
+            <IntersectionProvider>
+              <FrontLayout>
+                {children}
+                <ScrollToTop className='mui-fixed'>
+                  <Button
+                    variant='contained'
+                    className='is-10 bs-10 rounded-full p-0 min-is-0 flex items-center justify-center'
+                  >
+                    <i className='tabler-arrow-up' />
+                  </Button>
+                </ScrollToTop>
+              </FrontLayout>
+            </IntersectionProvider>
+          </BlankLayout>
+        </Providers>
+      </body>
+    </html>
+  )
+}
+
+export default Layout

src/app/front-pages/payment/page.tsx

@@ -0,0 +1,17 @@
+// Component Imports
+import Payment from '@views/front-pages/Payment'
+
+// Data Imports
+import { getPricingData } from '@/app/server/actions'
+
+// TODO: Connect to backend API when pricing service is available
+
+const PaymentPage = async () => {
+  // TODO: Fetch data from backend API when pricing service is available
+  const pricingData = await getPricingData()
+  const data = pricingData.pricingPlans
+
+  return <Payment data={data} />
+}
+
+export default PaymentPage

src/app/front-pages/pricing/page.tsx

@@ -0,0 +1,14 @@
+// Component Imports
+import PricingWrapper from '@/views/front-pages/pricing'
+import type { PricingPlanType } from '@/types/pages/pricingTypes'
+
+// TODO: Connect to backend API when pricing service is available
+
+const PricingPage = async () => {
+  // TODO: Fetch data from backend API when pricing service is available
+  const data: PricingPlanType[] = []
+
+  return <PricingWrapper data={data} />
+}
+
+export default PricingPage

src/app/globals.css

@@ -0,0 +1,133 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --border-radius: var(--mui-shape-borderRadius);
+  --border-color: var(--mui-palette-divider);
+  --primary-color: var(--mui-palette-primary-main);
+  --background-color: var(--mui-palette-background-default);
+  --background-color-rgb: var(--mui-palette-background-paperChannel);
+  --header-height: 54px;
+  --header-z-index: var(--mui-zIndex-appBar);
+  --footer-z-index: 10;
+  --customizer-z-index: var(--mui-zIndex-drawer);
+  --search-z-index: var(--mui-zIndex-tooltip);
+  --drawer-z-index: var(--mui-zIndex-drawer);
+  --backdrop-color: rgb(var(--mui-mainColorChannels-light) / 0.5);
+  --mui-mainColorChannels-shadow: var(--mui-mainColorChannels-lightShadow);
+}
+
+[data-dark] {
+  --backdrop-color: rgb(23 25 37 / 0.6);
+  --mui-mainColorChannels-shadow: var(--mui-mainColorChannels-darkShadow);
+}
+
+*,
+::before,
+::after {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  border-width: 0;
+  border-style: solid;
+  border-color: theme('borderColor.DEFAULT', currentColor);
+}
+
+html {
+  display: flex;
+  inline-size: 100%;
+  min-block-size: 100%;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+ul:not([class]) {
+  margin-block: 1rem;
+  padding-inline-start: 40px;
+}
+
+/*! Do not remove the following styles */
+/*
+  Fix the popout / submenu closing issue when using hover trigger to open the menu and using
+  perfectscrollbar where the bridge create with safe polygon by floating ui was not working
+*/
+[data-floating-ui-safe-polygon] .scrollbar-container {
+  pointer-events: auto;
+}
+[data-floating-ui-safe-polygon] .scrollbar-container .ps__rail-y {
+  pointer-events: none;
+}
+
+.ps__rail-y {
+  inset-inline-end: 0 !important;
+  inset-inline-start: auto !important;
+  & .ps__thumb-y {
+    inset-inline-end: 3px !important;
+    inset-inline-start: auto !important;
+    background-color: var(--mui-palette-divider);
+    inline-size: 6px;
+    &:hover,
+    &:focus,
+    &.ps--clicking {
+      background-color: var(--mui-palette-action-disabled) !important;
+    }
+  }
+  &:hover,
+  &:focus,
+  &.ps--clicking {
+    background-color: var(--mui-palette-action-hover) !important;
+  }
+  &:hover,
+  &:focus,
+  &.ps--clicking {
+    .ps__thumb-y {
+      background-color: var(--mui-palette-action-disabled) !important;
+    }
+  }
+}
+
+.ts-vertical-nav-root {
+  .ps__thumb-y {
+    inline-size: 4px;
+    &:hover,
+    &:focus,
+    &.ps--clicking {
+      inline-size: 6px;
+    }
+  }
+  .ps__rail-y {
+    inline-size: 10px;
+    &:hover,
+    &:focus,
+    &.ps--clicking {
+      background-color: transparent !important;
+      .ps__thumb-y {
+        inline-size: 6px;
+      }
+    }
+  }
+}
+
+:where([class^='tabler-']) {
+  font-size: 1.5rem;
+}
+
+/* Fix width issue for the input-otp component */
+input[autocomplete='one-time-code'][data-input-otp='true'] {
+  inline-size: 100% !important;
+}
+
+code {
+  font-family: inherit;
+  padding-block: 2px;
+  padding-inline: 4px;
+  border-radius: 4px;
+  font-size: 90%;
+  color: var(--mui-palette-info-main);
+  background-color: rgb(var(--mui-palette-info-mainChannel) / 0.08);
+  border: 0;
+}

src/app/layout.tsx

@@ -0,0 +1,46 @@
+// MUI Imports
+import InitColorSchemeScript from '@mui/material/InitColorSchemeScript'
+
+// Third-party Imports
+import 'react-perfect-scrollbar/dist/css/styles.css'
+
+// Type Imports
+import type { ChildrenType } from '@core/types'
+
+// Util Imports
+import { getSystemMode } from '@core/utils/serverHelpers'
+
+// Style Imports
+import '@/app/globals.css'
+
+// Generated Icon CSS Imports
+import '@assets/iconify-icons/generated-icons.css'
+
+// Font Imports
+import { iran_sans } from '@core/theme'
+
+// Config Imports
+import { getMetadata } from '@configs/metadata'
+
+export const metadata = getMetadata()
+
+const RootLayout = async (props: ChildrenType) => {
+  const { children } = props
+  
+
+  // Vars
+  const systemMode = await getSystemMode()
+  const direction = 'rtl' // Fixed RTL direction
+
+  return (
+    <html id='__next' dir={direction} className={iran_sans.className} suppressHydrationWarning>
+      <body className='flex is-full min-bs-full flex-auto flex-col'>
+        <InitColorSchemeScript attribute='data' defaultMode={systemMode} />
+        {children}
+      </body>
+    </html>
+  )
+}
+
+export default RootLayout
+

src/app/page.tsx

@@ -0,0 +1,37 @@
+'use client'
+
+// React Imports
+import { useEffect } from 'react'
+
+// Next Imports
+import { useRouter } from 'next/navigation'
+
+// Config Imports
+import themeConfig from '@configs/themeConfig'
+
+const RootPage = () => {
+  const router = useRouter()
+  console.log('RootPage')
+
+  useEffect(() => {
+    // Check for authentication token
+    const token = typeof window !== 'undefined' ? localStorage.getItem('auth_token') : null
+    const user = typeof window !== 'undefined' ? localStorage.getItem('auth_user') : null
+
+    if (token && user) {
+      // Token exists and is valid, redirect to dashboard
+      router.replace(themeConfig.homePageUrl)
+    } else {
+      // No token or invalid, redirect to login
+      router.replace('/login')
+    }
+  }, [router])
+
+  // Show nothing while redirecting
+  return null
+}
+
+export default RootPage
+
+
+

src/app/server/actions.ts

@@ -0,0 +1,95 @@
+'use server'
+
+/**
+ * Server Actions for fetching static data
+ * 
+ * These functions are used to fetch static/mock data for the application.
+ * If you need to fetch data from an API, you can replace these implementations
+ * with actual API calls.
+ */
+
+export async function getPricingData() {
+  // Return empty pricing data structure
+  // TODO: Implement with actual data or API call
+  return {
+    pricingPlans: [],
+    currentPlan: null
+  }
+}
+
+export async function getInvoiceData() {
+  // Return empty invoice data structure
+  // TODO: Implement with actual data or API call
+  return {
+    invoices: [],
+    stats: {
+      totalInvoices: 0,
+      paidInvoices: 0,
+      pendingInvoices: 0,
+      pastDueInvoices: 0
+    }
+  }
+}
+
+export async function getStatisticsData() {
+  // Return empty statistics data structure
+  // TODO: Implement with actual data or API call
+  return {
+    statsHorizontalWithAvatar: [],
+    statsHorizontalWithBorder: [],
+    customerStats: [],
+    statsSquare: [],
+    statsHorizontal: [],
+    statsVertical: [],
+    statsWithAreaChart: []
+  }
+}
+
+export async function getEcommerceData() {
+  // Return empty ecommerce data structure
+  // TODO: Implement with actual data or API call
+  return {
+    products: [],
+    orderData: [],
+    customerData: [],
+    reviews: [],
+    referrals: []
+  }
+}
+
+export async function getLogisticsData() {
+  // Return empty logistics data structure
+  // TODO: Implement with actual data or API call
+  return {
+    vehicles: []
+  }
+}
+
+export async function getAcademyData() {
+  // Return empty academy data structure
+  // TODO: Implement with actual data or API call
+  return {
+    courses: [],
+    myCourses: [],
+    stats: {},
+    courseDetails: {
+      title: '',
+      about: '',
+      instructor: '',
+      instructorAvatar: '',
+      instructorPosition: '',
+      skillLevel: '',
+      totalLectures: 0,
+      totalStudents: 0,
+      isCaptions: false,
+      language: '',
+      length: '',
+      content: [],
+      description: []
+    }
+  }
+}
+
+
+
+