@canmingir/link 1.1.0

package/minimal/src/layouts/main/nav/mobile/nav-list.jsx

@@ -0,0 +1,83 @@
+import PropTypes from 'prop-types';
+import { useState, useCallback } from 'react';
+
+import Collapse from '@mui/material/Collapse';
+import { stackClasses } from '@mui/material/Stack';
+import { listItemButtonClasses } from '@mui/material/ListItemButton';
+
+import { useActiveLink } from 'src/routes/hooks/use-active-link';
+
+import { NavSectionVertical } from 'src/components/nav-section';
+
+import { NavItem } from './nav-item';
+
+// ----------------------------------------------------------------------
+
+export default function NavList({ data }) {
+  const active = useActiveLink(data.path, !!data.children);
+
+  const [openMenu, setOpenMenu] = useState(false);
+
+  const handleToggleMenu = useCallback(() => {
+    if (data.children) {
+      setOpenMenu((prev) => !prev);
+    }
+  }, [data.children]);
+
+  return (
+    <>
+      <NavItem
+        open={openMenu}
+        onClick={handleToggleMenu}
+        //
+        title={data.title}
+        path={data.path}
+        icon={data.icon}
+        //
+        hasChild={!!data.children}
+        externalLink={data.path.includes('http')}
+        //
+        active={active}
+      />
+
+      {!!data.children && (
+        <Collapse in={openMenu} unmountOnExit>
+          <NavSectionVertical
+            data={data.children}
+            slotProps={{
+              rootItem: {
+                minHeight: 36,
+              },
+            }}
+            sx={{
+              [`& .${stackClasses.root}`]: {
+                '&:last-of-type': {
+                  [`& .${listItemButtonClasses.root}`]: {
+                    height: 160,
+                    backgroundSize: 'cover',
+                    backgroundPosition: 'center',
+                    bgcolor: 'background.neutral',
+                    backgroundRepeat: 'no-repeat',
+                    backgroundImage: 'url(/assets/illustrations/illustration_dashboard.png)',
+                    '& .label': {
+                      display: 'none',
+                    },
+                  },
+                },
+              },
+            }}
+          />
+        </Collapse>
+      )}
+    </>
+  );
+}
+
+NavList.propTypes = {
+  data: PropTypes.shape({
+    title: PropTypes.string,
+    path: PropTypes.string,
+    icon: PropTypes.element,
+    children: PropTypes.array,
+  }),
+};

package/minimal/src/layouts/simple/index.jsx

@@ -0,0 +1,19 @@
+import PropTypes from 'prop-types';
+
+import Header from '../common/header-simple';
+
+// ----------------------------------------------------------------------
+
+export default function SimpleLayout({ children }) {
+  return (
+    <>
+      <Header />
+
+      {children}
+    </>
+  );
+}
+
+SimpleLayout.propTypes = {
+  children: PropTypes.node,
+};

package/minimal/src/locales/config-lang.js

@@ -0,0 +1,79 @@
+import merge from 'lodash/merge';
+import {
+  fr as frFRAdapter,
+  vi as viVNAdapter,
+  enUS as enUSAdapter,
+  zhCN as zhCNAdapter,
+  arSA as arSAAdapter,
+} from 'date-fns/locale';
+
+// date-pickers
+import {
+  enUS as enUSDate,
+  frFR as frFRDate,
+  viVN as viVNDate,
+  zhCN as zhCNDate,
+} from '@mui/x-date-pickers/locales';
+// core
+import {
+  enUS as enUSCore,
+  frFR as frFRCore,
+  viVN as viVNCore,
+  zhCN as zhCNCore,
+  arSA as arSACore,
+} from '@mui/material/locale';
+// data-grid
+import {
+  enUS as enUSDataGrid,
+  frFR as frFRDataGrid,
+  viVN as viVNDataGrid,
+  zhCN as zhCNDataGrid,
+  arSD as arSDDataGrid,
+} from '@mui/x-data-grid';
+
+// PLEASE REMOVE `LOCAL STORAGE` WHEN YOU CHANGE SETTINGS.
+// ----------------------------------------------------------------------
+
+export const allLangs = [
+  {
+    label: 'English',
+    value: 'en',
+    systemValue: merge(enUSDate, enUSDataGrid, enUSCore),
+    adapterLocale: enUSAdapter,
+    icon: 'flagpack:gb-nir',
+  },
+  {
+    label: 'French',
+    value: 'fr',
+    systemValue: merge(frFRDate, frFRDataGrid, frFRCore),
+    adapterLocale: frFRAdapter,
+    icon: 'flagpack:fr',
+  },
+  {
+    label: 'Vietnamese',
+    value: 'vi',
+    systemValue: merge(viVNDate, viVNDataGrid, viVNCore),
+    adapterLocale: viVNAdapter,
+    icon: 'flagpack:vn',
+  },
+  {
+    label: 'Chinese',
+    value: 'cn',
+    systemValue: merge(zhCNDate, zhCNDataGrid, zhCNCore),
+    adapterLocale: zhCNAdapter,
+    icon: 'flagpack:cn',
+  },
+  {
+    label: 'Arabic',
+    value: 'ar',
+    systemValue: merge(arSDDataGrid, arSACore),
+    adapterLocale: arSAAdapter,
+    icon: 'flagpack:sa',
+  },
+];
+
+export const defaultLang = allLangs[0]; // English
+
+// GET MORE COUNTRY FLAGS
+// https://icon-sets.iconify.design/flagpack/
+// https://www.dropbox.com/sh/nec1vwswr9lqbh9/AAB9ufC8iccxvtWi3rzZvndLa?dl=0

package/minimal/src/locales/i18n.js

@@ -0,0 +1,39 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+
+import { localStorageGetItem } from 'src/utils/storage-available';
+
+import { defaultLang } from './config-lang';
+import translationEn from './langs/en.json';
+import translationFr from './langs/fr.json';
+import translationVi from './langs/vi.json';
+import translationCn from './langs/cn.json';
+import translationAr from './langs/ar.json';
+
+// ----------------------------------------------------------------------
+
+const lng = localStorageGetItem('i18nextLng', defaultLang.value);
+
+i18n
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    resources: {
+      en: { translations: translationEn },
+      fr: { translations: translationFr },
+      vi: { translations: translationVi },
+      cn: { translations: translationCn },
+      ar: { translations: translationAr },
+    },
+    lng,
+    fallbackLng: lng,
+    debug: false,
+    ns: ['translations'],
+    defaultNS: 'translations',
+    interpolation: {
+      escapeValue: false,
+    },
+  });
+
+export default i18n;

package/minimal/src/locales/index.js

@@ -0,0 +1,5 @@
+export * from './config-lang';
+
+export * from './use-locales';
+
+export { default as LocalizationProvider } from './localization-provider';

package/minimal/src/locales/langs/ar.json

@@ -0,0 +1,54 @@
+{
+  "app": "تطبيق",
+  "job": "وظيفة",
+  "user": "مستخدم",
+  "list": "قائمة",
+  "edit": "تعديل",
+  "shop": "متجر",
+  "blog": "مدونة",
+  "post": "مقالة",
+  "mail": "بريد",
+  "chat": "دردشة",
+  "file": "ملف",
+  "tour": "جولة",
+  "cards": "بطاقات",
+  "blank": "فارغ",
+  "order": "طلب",
+  "lists": "قوائم",
+  "create": "إنشاء",
+  "kanban": "كانبان",
+  "general": "عام",
+  "banking": "مصرفية",
+  "booking": "حجز",
+  "profile": "ملف تعريف",
+  "account": "حساب",
+  "product": "منتج",
+  "invoice": "فاتورة",
+  "details": "تفاصيل",
+  "checkout": "الدفع",
+  "calendar": "تقويم",
+  "overview": "نظرة عامة",
+  "analytics": "تحليلات",
+  "ecommerce": "التجارة الإلكترونية",
+  "management": "إدارة",
+  "menu_level": "مستوى القائمة",
+  "item_label": "تسمية العنصر",
+  "description": "الوصف",
+  "other_cases": "حالات أخرى",
+  "item_caption": "عنوان العنصر",
+  "file_manager": "مدير الملفات",
+  "menu_level_1a": "مستوى القائمة 1a",
+  "menu_level_1b": "مستوى القائمة 1b",
+  "menu_level_2a": "مستوى القائمة 2a",
+  "menu_level_2b": "مستوى القائمة 2b",
+  "menu_level_3a": "مستوى القائمة 3a",
+  "menu_level_3b": "مستوى القائمة 4b",
+  "item_disabled": "العنصر معطل",
+  "item_by_roles": "العنصر حسب الأدوار",
+  "item_external_link": "رابط خارجي للعنصر",
+  "only_admin_can_see_this_item": "يمكن للمسؤول فقط رؤية هذا العنصر",
+  "upgrade_to_pro": "الترقية إلى Pro",
+  "demo": {
+    "title": "Arabic"
+  }
+}

package/minimal/src/locales/langs/cn.json

@@ -0,0 +1,54 @@
+{
+  "app": "应用",
+  "job": "工作",
+  "user": "用户",
+  "list": "列表",
+  "edit": "编辑",
+  "shop": "商店",
+  "blog": "博客",
+  "post": "文章",
+  "mail": "邮件",
+  "chat": "聊天",
+  "file": "文件",
+  "tour": "导览",
+  "cards": "卡片",
+  "blank": "空白",
+  "order": "订单",
+  "lists": "列表",
+  "create": "创建",
+  "kanban": "看板",
+  "general": "常规",
+  "banking": "银行",
+  "booking": "预订",
+  "profile": "个人资料",
+  "account": "账户",
+  "product": "产品",
+  "invoice": "发票",
+  "details": "详情",
+  "checkout": "结账",
+  "calendar": "日历",
+  "overview": "概览",
+  "analytics": "分析",
+  "ecommerce": "电子商务",
+  "management": "管理",
+  "menu_level": "菜单级别",
+  "item_label": "项目标签",
+  "description": "描述",
+  "other_cases": "其他情况",
+  "item_caption": "项目标题",
+  "file_manager": "文件管理器",
+  "menu_level_1a": "菜单级别 1a",
+  "menu_level_1b": "菜单级别 1b",
+  "menu_level_2a": "菜单级别 2a",
+  "menu_level_2b": "菜单级别 2b",
+  "menu_level_3a": "菜单级别 3a",
+  "menu_level_3b": "菜单级别 4b",
+  "item_disabled": "项目已禁用",
+  "item_by_roles": "按角色显示的项目",
+  "item_external_link": "项目外部链接",
+  "only_admin_can_see_this_item": "只有管理员可以看到此项目",
+  "upgrade_to_pro": "升级到专业版",
+  "demo": {
+    "title": "Chinese"
+  }
+}

package/minimal/src/locales/langs/en.json

@@ -0,0 +1,54 @@
+{
+  "app": "app",
+  "job": "job",
+  "user": "user",
+  "list": "list",
+  "edit": "edit",
+  "shop": "shop",
+  "blog": "blog",
+  "post": "post",
+  "mail": "mail",
+  "chat": "chat",
+  "file": "file",
+  "tour": "tour",
+  "cards": "cards",
+  "blank": "blank",
+  "order": "order",
+  "lists": "lists",
+  "create": "create",
+  "kanban": "kanban",
+  "general": "general",
+  "banking": "banking",
+  "booking": "booking",
+  "profile": "profile",
+  "account": "account",
+  "product": "product",
+  "invoice": "invoice",
+  "details": "details",
+  "checkout": "checkout",
+  "calendar": "calendar",
+  "overview": "overview",
+  "analytics": "analytics",
+  "ecommerce": "e-commerce",
+  "management": "management",
+  "menu_level": "menu level",
+  "item_label": "item label",
+  "description": "description",
+  "other_cases": "other cases",
+  "item_caption": "item caption",
+  "file_manager": "File Manager",
+  "menu_level_1a": "menu level 1a",
+  "menu_level_1b": "menu level 1b",
+  "menu_level_2a": "menu level 2a",
+  "menu_level_2b": "menu level 2b",
+  "menu_level_3a": "menu level 3a",
+  "menu_level_3b": "menu level 4b",
+  "item_disabled": "item disabled",
+  "item_by_roles": "item by roles",
+  "item_external_link": "item external link",
+  "only_admin_can_see_this_item": "Only admin can see this item",
+  "upgrade_to_pro": "Upgrade to Pro",
+  "demo": {
+    "title": "English"
+  }
+}

package/minimal/src/locales/langs/fr.json

@@ -0,0 +1,54 @@
+{
+  "app": "application",
+  "job": "emploi",
+  "user": "utilisateur",
+  "list": "liste",
+  "edit": "modifier",
+  "shop": "boutique",
+  "blog": "blog",
+  "post": "article",
+  "mail": "courrier",
+  "chat": "discussion",
+  "file": "fichier",
+  "tour": "visite",
+  "cards": "cartes",
+  "blank": "vide",
+  "order": "commande",
+  "lists": "listes",
+  "create": "créer",
+  "kanban": "tableau",
+  "general": "général",
+  "banking": "bancaire",
+  "booking": "réservation",
+  "profile": "profil",
+  "account": "compte",
+  "product": "produit",
+  "invoice": "facture",
+  "details": "détails",
+  "checkout": "paiement",
+  "calendar": "calendrier",
+  "overview": "aperçu",
+  "analytics": "analytics",
+  "ecommerce": "e-commerce",
+  "management": "gestion",
+  "menu_level": "niveau de menu",
+  "item_label": "étiquette de l'élément",
+  "description": "description",
+  "other_cases": "autres cas",
+  "item_caption": "légende de l'élément",
+  "file_manager": "Gestionnaire de fichiers",
+  "menu_level_1a": "niveau de menu 1a",
+  "menu_level_1b": "niveau de menu 1b",
+  "menu_level_2a": "niveau de menu 2a",
+  "menu_level_2b": "niveau de menu 2b",
+  "menu_level_3a": "niveau de menu 3a",
+  "menu_level_3b": "niveau de menu 4b",
+  "item_disabled": "élément désactivé",
+  "item_by_roles": "élément par rôles",
+  "item_external_link": "lien externe de l'élément",
+  "only_admin_can_see_this_item": "Seul l'administrateur peut voir cet élément",
+  "upgrade_to_pro": "Passer à la version Pro",
+  "demo": {
+    "title": "France"
+  }
+}

package/minimal/src/locales/langs/vi.json

@@ -0,0 +1,54 @@
+{
+  "app": "ứng dụng",
+  "job": "công việc",
+  "user": "người dùng",
+  "list": "danh sách",
+  "edit": "chỉnh sửa",
+  "shop": "cửa hàng",
+  "blog": "blog",
+  "post": "bài viết",
+  "mail": "thư",
+  "chat": "trò chuyện",
+  "file": "tệp",
+  "tour": "du lịch",
+  "cards": "thẻ",
+  "blank": "trống",
+  "order": "đơn hàng",
+  "lists": "danh sách",
+  "create": "tạo",
+  "kanban": "bảng",
+  "general": "chung",
+  "banking": "ngân hàng",
+  "booking": "đặt chỗ",
+  "profile": "hồ sơ",
+  "account": "tài khoản",
+  "product": "sản phẩm",
+  "invoice": "hóa đơn",
+  "details": "chi tiết",
+  "checkout": "thanh toán",
+  "calendar": "lịch",
+  "overview": "tổng quan",
+  "analytics": "phân tích",
+  "ecommerce": "thương mại điện tử",
+  "management": "quản lý",
+  "menu_level": "cấp độ menu",
+  "item_label": "nhãn mục",
+  "description": "mô tả",
+  "other_cases": "trường hợp khác",
+  "item_caption": "chú thích mục",
+  "file_manager": "Quản lý tệp",
+  "menu_level_1a": "cấp độ menu 1a",
+  "menu_level_1b": "cấp độ menu 1b",
+  "menu_level_2a": "cấp độ menu 2a",
+  "menu_level_2b": "cấp độ menu 2b",
+  "menu_level_3a": "cấp độ menu 3a",
+  "menu_level_3b": "cấp độ menu 4b",
+  "item_disabled": "mục bị vô hiệu hóa",
+  "item_by_roles": "mục theo vai trò",
+  "item_external_link": "liên kết bên ngoài của mục",
+  "only_admin_can_see_this_item": "Chỉ admin mới có thể thấy mục này",
+  "upgrade_to_pro": "Nâng cấp lên phiên bản Pro",
+  "demo": {
+    "title": "Vietnamese"
+  }
+}

package/minimal/src/locales/localization-provider.jsx

@@ -0,0 +1,22 @@
+import PropTypes from 'prop-types';
+
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import { LocalizationProvider as MuiLocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+
+import { useLocales } from './use-locales';
+
+// ----------------------------------------------------------------------
+
+export default function LocalizationProvider({ children }) {
+  const { currentLang } = useLocales();
+
+  return (
+    <MuiLocalizationProvider dateAdapter={AdapterDateFns} adapterLocale={currentLang.adapterLocale}>
+      {children}
+    </MuiLocalizationProvider>
+  );
+}
+
+LocalizationProvider.propTypes = {
+  children: PropTypes.node,
+};

package/minimal/src/locales/use-locales.js

@@ -0,0 +1,44 @@
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { localStorageGetItem } from 'src/utils/storage-available';
+
+import { useSettingsContext } from 'src/components/settings';
+
+import { allLangs, defaultLang } from './config-lang';
+
+// ----------------------------------------------------------------------
+
+export function useLocales() {
+  const langStorage = localStorageGetItem('i18nextLng');
+
+  const currentLang = allLangs.find((lang) => lang.value === langStorage) || defaultLang;
+
+  return {
+    allLangs,
+    currentLang,
+  };
+}
+
+// ----------------------------------------------------------------------
+
+export function useTranslate() {
+  const { t, i18n, ready } = useTranslation();
+
+  const settings = useSettingsContext();
+
+  const onChangeLang = useCallback(
+    (newlang) => {
+      i18n.changeLanguage(newlang);
+      settings.onChangeDirectionByLang(newlang);
+    },
+    [i18n, settings]
+  );
+
+  return {
+    t,
+    i18n,
+    ready,
+    onChangeLang,
+  };
+}

package/minimal/src/main.jsx

@@ -0,0 +1,20 @@
+import { Suspense } from 'react';
+import ReactDOM from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+import { HelmetProvider } from 'react-helmet-async';
+
+import App from './app';
+
+// ----------------------------------------------------------------------
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+
+root.render(
+  <HelmetProvider>
+    <BrowserRouter>
+      <Suspense>
+        <App />
+      </Suspense>
+    </BrowserRouter>
+  </HelmetProvider>
+);

package/minimal/src/pages/403.jsx

@@ -0,0 +1,17 @@
+import { Helmet } from 'react-helmet-async';
+
+import { View403 } from 'src/sections/error';
+
+// ----------------------------------------------------------------------
+
+export default function Page403() {
+  return (
+    <>
+      <Helmet>
+        <title> 403 Forbidden</title>
+      </Helmet>
+
+      <View403 />
+    </>
+  );
+}

package/minimal/src/pages/404.jsx

@@ -0,0 +1,17 @@
+import { Helmet } from 'react-helmet-async';
+
+import { NotFoundView } from 'src/sections/error';
+
+// ----------------------------------------------------------------------
+
+export default function NotFoundPage() {
+  return (
+    <>
+      <Helmet>
+        <title> 404 Page Not Found!</title>
+      </Helmet>
+
+      <NotFoundView />
+    </>
+  );
+}

package/minimal/src/pages/500.jsx

@@ -0,0 +1,17 @@
+import { Helmet } from 'react-helmet-async';
+
+import { View500 } from 'src/sections/error';
+
+// ----------------------------------------------------------------------
+
+export default function Page500() {
+  return (
+    <>
+      <Helmet>
+        <title> 500 Internal Server Error</title>
+      </Helmet>
+
+      <View500 />
+    </>
+  );
+}

package/minimal/src/pages/about-us.jsx

@@ -0,0 +1,17 @@
+import { Helmet } from 'react-helmet-async';
+
+import { AboutView } from 'src/sections/about/view';
+
+// ----------------------------------------------------------------------
+
+export default function AboutPage() {
+  return (
+    <>
+      <Helmet>
+        <title> About us</title>
+      </Helmet>
+
+      <AboutView />
+    </>
+  );
+}