diff --git a/src/Hooks/useWindowResize.tsx b/src/Hooks/useWindowResize.tsx new file mode 100644 index 0000000..3585264 --- /dev/null +++ b/src/Hooks/useWindowResize.tsx @@ -0,0 +1,20 @@ +import React, { useEffect, useState } from 'react' + +export const useWindowResize = () => { + const [windowWidth, setWindowWidth] = useState(window.innerWidth); + + useEffect(() => { + window.addEventListener('resize', handleResize); + // Cleanup function to remove the event listener + return () => { + window.removeEventListener('resize', handleResize); + }; + }, [windowWidth]); + + const handleResize = () => { + setWindowWidth(window.innerWidth); + }; + + return {windowWidth , handleResize}; +} + diff --git a/src/Layout/Ui/SideBar.tsx b/src/Layout/Ui/SideBar.tsx index 17de545..56566cd 100644 --- a/src/Layout/Ui/SideBar.tsx +++ b/src/Layout/Ui/SideBar.tsx @@ -66,7 +66,7 @@ const SideBar = ({

{t("sidebar.setting")}

-
+
{navigate("/setting")}}> {t("sidebar.setting")}
diff --git a/src/Pages/Admin/Setting/Form/FileSetting.tsx b/src/Pages/Admin/Setting/Form/FileSetting.tsx new file mode 100644 index 0000000..42a05ad --- /dev/null +++ b/src/Pages/Admin/Setting/Form/FileSetting.tsx @@ -0,0 +1,42 @@ +import TabHeader from './TabHeader' +import { Form, Formik } from 'formik' +import { getInitialValues, getValidationSchema } from './FileSetting/formUtils' +import PersonalDetailsForm from './FileSetting/PersonalDetailsForm' +import TitleDetailsForm from './FileSetting/TitleDetailsForm' +import AttachmentForm from './FileSetting/AttachmentForm' +import { useTranslation } from 'react-i18next' + +const FileSetting = () => { + const {t} = useTranslation() + const handelSubmit = (values: any) => { + console.log(values, "values"); + }; + return ( +
+ +
+ + +
+ + +
+ + + + +
+
+ ) +} + +export default FileSetting \ No newline at end of file diff --git a/src/Pages/Admin/Setting/Form/FileSetting/AttachmentForm.tsx b/src/Pages/Admin/Setting/Form/FileSetting/AttachmentForm.tsx new file mode 100644 index 0000000..246aabb --- /dev/null +++ b/src/Pages/Admin/Setting/Form/FileSetting/AttachmentForm.tsx @@ -0,0 +1,23 @@ +import React from "react"; +import { useTranslation } from "react-i18next"; +import { FaImage, FaStore } from "react-icons/fa"; +import ImageBoxField from "./ImageBoxField/ImageBoxField"; + +const AttachmentForm = () => { + const [t] = useTranslation(); + + return ( +
+
+ +

{t("header.attachments")}

+
+
+ + +
+
+ ); +}; + +export default AttachmentForm; diff --git a/src/Pages/Admin/Setting/Form/FileSetting/ImageBoxField/ImageBoxField.scss b/src/Pages/Admin/Setting/Form/FileSetting/ImageBoxField/ImageBoxField.scss new file mode 100644 index 0000000..66e2f2f --- /dev/null +++ b/src/Pages/Admin/Setting/Form/FileSetting/ImageBoxField/ImageBoxField.scss @@ -0,0 +1,38 @@ +.ImageBoxField { + .ImageBox { + width: 120px; + height: 120px; + display: flex; + align-items: center; + justify-content: center; + border: max(1.5px, 0.1vw) dashed #a9c3f1; + margin-block: 10px; + border-radius: 5px; + z-index: 9999999 !important; + .ImageBoxIcon { + cursor: pointer; + } + .imagePreview { + max-width: 99%; + height: auto; + max-height: 99%; + object-fit: contain; + border-radius: 5px; + } + } + .ImageHeader { + display: flex; + align-items: center; + justify-content: flex-end; + gap: 10px; + } + + .ImageCancelIcon { + width: 16px !important; + height: 16px !important; + } + .ImageBoxIcon { + width: 20px !important; + height: 20px !important; + } +} diff --git a/src/Pages/Admin/Setting/Form/FileSetting/ImageBoxField/ImageBoxField.tsx b/src/Pages/Admin/Setting/Form/FileSetting/ImageBoxField/ImageBoxField.tsx new file mode 100644 index 0000000..fae09b2 --- /dev/null +++ b/src/Pages/Admin/Setting/Form/FileSetting/ImageBoxField/ImageBoxField.tsx @@ -0,0 +1,87 @@ +import { useFormikContext } from "formik"; +import { useState, useRef, useEffect } from "react"; +import "./ImageBoxField.scss"; +import ImageIcon from "./ImageIcon"; +import ImageCancelIcon from "./ImageCancelIcon"; +import { generateImagePreview } from "./generateImagePreview"; +import { getNestedValue } from "../../../../../../utils/getNestedValue"; +import { useTranslation } from "react-i18next"; + +// Helper function to generate image preview from a File + +const ImageBoxField = ({ name }: any) => { + const formik = useFormikContext(); + const value = getNestedValue(formik.values, name); + const [imagePreview, setImagePreview] = useState(null); + const fileInputRef = useRef(null); + + useEffect(() => { + if (value instanceof File) { + generateImagePreview(value, setImagePreview); + } else if (typeof value === "string") { + setImagePreview(value); + } else { + setImagePreview(null); + } + }, [value]); + + const handleFileChange = (event: any) => { + const file = event.target.files[0]; + if (file) { + generateImagePreview(file, setImagePreview); + formik.setFieldValue(name, file); + } + }; + + const handleButtonClick = () => { + const fileInput = fileInputRef.current; + if (fileInput) { + fileInput.click(); + } + }; + + const handleCancel = () => { + setImagePreview(""); + formik.setFieldValue(name, ""); + + if (fileInputRef.current) { + fileInputRef.current.value = ""; + } + }; + const [t] = useTranslation(); + return ( +
+
{t(`input.${name}`)}
+
+ {imagePreview ? ( + <> + + + + ) : ( +
hidden
+ )} +
+
+ {imagePreview ? ( + Preview + ) : ( + + )} +
+ +
+ ); +}; + +export default ImageBoxField; diff --git a/src/Pages/Admin/Setting/Form/FileSetting/ImageBoxField/ImageCancelIcon.tsx b/src/Pages/Admin/Setting/Form/FileSetting/ImageBoxField/ImageCancelIcon.tsx new file mode 100644 index 0000000..d42ba53 --- /dev/null +++ b/src/Pages/Admin/Setting/Form/FileSetting/ImageBoxField/ImageCancelIcon.tsx @@ -0,0 +1,18 @@ +import React from "react"; + +interface ImageCancelIconProps extends React.HTMLAttributes {} + +const ImageCancelIcon: React.FC = (props) => { + return ( +
+ + + +
+ ); +}; + +export default ImageCancelIcon; diff --git a/src/Pages/Admin/Setting/Form/FileSetting/ImageBoxField/ImageIcon.tsx b/src/Pages/Admin/Setting/Form/FileSetting/ImageBoxField/ImageIcon.tsx new file mode 100644 index 0000000..4ca597a --- /dev/null +++ b/src/Pages/Admin/Setting/Form/FileSetting/ImageBoxField/ImageIcon.tsx @@ -0,0 +1,18 @@ +import React from "react"; + +interface ImageIconProps extends React.HTMLAttributes {} + +const ImageIcon: React.FC = (props) => { + return ( +
+ + + +
+ ); +}; + +export default ImageIcon; diff --git a/src/Pages/Admin/Setting/Form/FileSetting/ImageBoxField/generateImagePreview.ts b/src/Pages/Admin/Setting/Form/FileSetting/ImageBoxField/generateImagePreview.ts new file mode 100644 index 0000000..3f754d3 --- /dev/null +++ b/src/Pages/Admin/Setting/Form/FileSetting/ImageBoxField/generateImagePreview.ts @@ -0,0 +1,10 @@ +export const generateImagePreview = ( + file: File, + setImagePreview: (result: string) => void, +) => { + const reader = new FileReader(); + reader.onloadend = () => { + setImagePreview(reader.result as string); + }; + reader.readAsDataURL(file); +}; diff --git a/src/Pages/Admin/Setting/Form/FileSetting/PersonalDetailsForm.tsx b/src/Pages/Admin/Setting/Form/FileSetting/PersonalDetailsForm.tsx new file mode 100644 index 0000000..f97a36c --- /dev/null +++ b/src/Pages/Admin/Setting/Form/FileSetting/PersonalDetailsForm.tsx @@ -0,0 +1,52 @@ +import { useTranslation } from "react-i18next"; +import { FaStore } from "react-icons/fa"; +import ValidationField from "../../../../../Components/ValidationField/ValidationField"; +import { statusType } from "../../../../../config/statusType"; +import { Col } from "antd"; + +const PersonalDetailsForm = () => { + const [t] = useTranslation(); + return ( +
+
+ +

{t("header.personal_information")}

+
+
+ + + + + + + + +
+
+ ); +}; + +export default PersonalDetailsForm; diff --git a/src/Pages/Admin/Setting/Form/FileSetting/TitleDetailsForm.tsx b/src/Pages/Admin/Setting/Form/FileSetting/TitleDetailsForm.tsx new file mode 100644 index 0000000..08ccd21 --- /dev/null +++ b/src/Pages/Admin/Setting/Form/FileSetting/TitleDetailsForm.tsx @@ -0,0 +1,30 @@ +import { useTranslation } from "react-i18next"; +import { FaStore } from "react-icons/fa"; +import ValidationField from "../../../../../Components/ValidationField/ValidationField"; +import { nationalities } from "../../../../../types/App"; +import { CiEdit } from "react-icons/ci"; + +const TitleDetailsForm = () => { + const [t] = useTranslation(); + + return ( +
+
+ +

{t("header.address")}

+
+
+ + +
+
+ ); +}; + +export default TitleDetailsForm; diff --git a/src/Pages/Admin/Setting/Form/FileSetting/formUtils.ts b/src/Pages/Admin/Setting/Form/FileSetting/formUtils.ts new file mode 100644 index 0000000..b14915a --- /dev/null +++ b/src/Pages/Admin/Setting/Form/FileSetting/formUtils.ts @@ -0,0 +1,13 @@ +import * as Yup from "yup"; + +export const getInitialValues = (objectToEdit: Partial) => { + return { + id: objectToEdit?.id ?? null, + name: objectToEdit?.name ?? null, + }; +}; + +export const getValidationSchema = () => { + // validate input + return Yup.object().shape({}); +}; diff --git a/src/Pages/Admin/Setting/Form/Notification.tsx b/src/Pages/Admin/Setting/Form/Notification.tsx new file mode 100644 index 0000000..cca9a0d --- /dev/null +++ b/src/Pages/Admin/Setting/Form/Notification.tsx @@ -0,0 +1,36 @@ +import React from 'react' +import TabHeader from './TabHeader' +import NotificationCard from './Notification/NotificationCard' +import { NotificationData } from '../../../../faker/item' +import { Form, Formik } from 'formik' +import { getInitialValues, getValidationSchema } from './Notification/formUtils' + +const Notification = () => { + const handelSubmit = (values: any) => { + console.log(values, "values"); + }; + return ( +
+ + + +
+
+ {NotificationData?.map((not: any) => ( + + ))} +
+
+ +
+ ) +} + +export default Notification \ No newline at end of file diff --git a/src/Pages/Admin/Setting/Form/Notification/NotificationCard.tsx b/src/Pages/Admin/Setting/Form/Notification/NotificationCard.tsx new file mode 100644 index 0000000..1455fc7 --- /dev/null +++ b/src/Pages/Admin/Setting/Form/Notification/NotificationCard.tsx @@ -0,0 +1,27 @@ +import { useTranslation } from "react-i18next" +import ValidationField from "../../../../../Components/ValidationField/ValidationField"; + +const NotificationCard = ({ + name, + description, +}:{ + name:string, + description:string, +}) => { + + const {t} = useTranslation(); + + return ( +
+
+
{t(`${name}`)}
+

{t(`${description}`)}

+
+
+ +
+
+ ) +} + +export default NotificationCard \ No newline at end of file diff --git a/src/Pages/Admin/Setting/Form/Notification/formUtils.ts b/src/Pages/Admin/Setting/Form/Notification/formUtils.ts new file mode 100644 index 0000000..b14915a --- /dev/null +++ b/src/Pages/Admin/Setting/Form/Notification/formUtils.ts @@ -0,0 +1,13 @@ +import * as Yup from "yup"; + +export const getInitialValues = (objectToEdit: Partial) => { + return { + id: objectToEdit?.id ?? null, + name: objectToEdit?.name ?? null, + }; +}; + +export const getValidationSchema = () => { + // validate input + return Yup.object().shape({}); +}; diff --git a/src/Pages/Admin/Setting/Form/SecuritySetting.tsx b/src/Pages/Admin/Setting/Form/SecuritySetting.tsx new file mode 100644 index 0000000..8e05ed3 --- /dev/null +++ b/src/Pages/Admin/Setting/Form/SecuritySetting.tsx @@ -0,0 +1,29 @@ +import React from 'react' +import TabHeader from './TabHeader' +import SecurityCard from './SecuritySetting/SecurityCard' +import { Button } from 'antd' +import { SecurityData } from './SecuritySetting/SecurityData' +import { SettingType } from '../../../../types/Setting' + +const SecuritySetting = () => { + return ( +
+ + +
+ {SecurityData?.map((e:SettingType)=>( + + ))} + +
+
+ ) +} + +export default SecuritySetting \ No newline at end of file diff --git a/src/Pages/Admin/Setting/Form/SecuritySetting/SecurityCard.tsx b/src/Pages/Admin/Setting/Form/SecuritySetting/SecurityCard.tsx new file mode 100644 index 0000000..c9d1eef --- /dev/null +++ b/src/Pages/Admin/Setting/Form/SecuritySetting/SecurityCard.tsx @@ -0,0 +1,27 @@ +import { useTranslation } from "react-i18next" +import ValidationField from "../../../../../Components/ValidationField/ValidationField"; +import { ReactElement } from "react"; +import { SettingType } from "../../../../../types/Setting"; + +const SecurityCard = ({ + name, + description, + children +}:SettingType) => { + + const {t} = useTranslation(); + + return ( +
+
+
{t(`practical.${name}`)}
+

{t(`practical.${description}`)}

+
+
+ {children} +
+
+ ) +} + +export default SecurityCard \ No newline at end of file diff --git a/src/Pages/Admin/Setting/Form/SecuritySetting/SecurityData.tsx b/src/Pages/Admin/Setting/Form/SecuritySetting/SecurityData.tsx new file mode 100644 index 0000000..87b4433 --- /dev/null +++ b/src/Pages/Admin/Setting/Form/SecuritySetting/SecurityData.tsx @@ -0,0 +1,47 @@ +import { Button } from "antd"; +import { SettingType } from "../../../../../types/Setting"; + +export const SecurityData:SettingType[] = [ + { + name:"password", + description:"Set a unique password to protect the account", + children:, + }, + { + name:"two_factors", + description:"Receive codes via SMS or email every time you log in", + // children:, + }, + { + name:"verify_phone_number", + description:"The phone number associated with the account", + // children:, + }, + { + name:"email_address", + description:"The email address associated with the account", + // children:, + }, + { + name:"device_management", + description:"Devices associated with the account", + children:, + }, + { + name:"account_activity", + description:"account_activities", + children:, + }, + { + name:"deactivate_the_account", + description:"This will close your account. Your account will be interactive when you log in again", + children:, + }, + { + name:"delete_account", + description:"Your account will be permanently deleted", + children:, + }, + +] + diff --git a/src/Pages/Admin/Setting/Form/SettingTabs.tsx b/src/Pages/Admin/Setting/Form/SettingTabs.tsx new file mode 100644 index 0000000..5095be5 --- /dev/null +++ b/src/Pages/Admin/Setting/Form/SettingTabs.tsx @@ -0,0 +1,51 @@ +import React, { useState } from 'react'; +import type { TabsProps } from 'antd'; +import { Tabs } from 'antd'; +import { useTranslation } from 'react-i18next'; +import { CgProfile } from "react-icons/cg"; +import { useWindowResize } from '../../../../Hooks/useWindowResize'; +import Card from '../../../ReSeller/Notifications/Card'; +import FileSetting from './FileSetting'; +import SecuritySetting from './SecuritySetting'; +import Notification from './Notification'; + +type TabPosition = 'left' | 'right' | 'top' | 'bottom'; + +const SettingTabs: React.FC = () => { + const {windowWidth} = useWindowResize() + const {t} = useTranslation(); + const [tabPosition, setTabPosition] = useState(windowWidth < 800 ? 'top' : 'left'); + const items: TabsProps['items'] = [ + + { + key: '1', + label: t('table.file_setting'), + children: , + }, + { + key: '2', + label: t('table.security_setting'), + children: , + }, + { + key: '3', + label: t('table.notification'), + children: , + }, + ]; + + + return ( + <> + + + ); +}; + +export default SettingTabs; \ No newline at end of file diff --git a/src/Pages/Admin/Setting/Form/TabHeader.tsx b/src/Pages/Admin/Setting/Form/TabHeader.tsx new file mode 100644 index 0000000..c6cebe3 --- /dev/null +++ b/src/Pages/Admin/Setting/Form/TabHeader.tsx @@ -0,0 +1,29 @@ +import { ReactElement } from 'react'; +import { useTranslation } from 'react-i18next' + +const TabHeader = ({ + name, + description, + children +}:{ + name:string, + description:string, + children?:ReactElement +}) => { + + const {t} = useTranslation(); + + return ( +
+
+
{t(`table.${name}`)}
+

{t(`table.${description}`)}

+
+
+ {children} +
+
+ ) +} + +export default TabHeader \ No newline at end of file diff --git a/src/Pages/Admin/Setting/Page.tsx b/src/Pages/Admin/Setting/Page.tsx new file mode 100644 index 0000000..6fe837f --- /dev/null +++ b/src/Pages/Admin/Setting/Page.tsx @@ -0,0 +1,31 @@ +import { FaPlus } from "react-icons/fa"; +import useModalHandler from "../../../utils/useModalHandler"; +import { ModalEnum } from "../../../enums/Model"; +import { useTranslation } from "react-i18next"; +import { lazy, Suspense } from "react"; +import { Spin } from "antd"; +import useSetPageTitle from "../../../Hooks/useSetPageTitle"; +import PageHeader from "../../../Layout/Dashboard/PageHeader"; +import SettingTabs from "./Form/SettingTabs"; + +const TableHeader = () => { + const [t] = useTranslation(); + + useSetPageTitle([ + {name:`${t(`page_header.home`)}`, path:"/"}, + {name:`${t(`page_header.setting`)}`, path:"setting"} + ]); + + return ( +
+ }> + + + +
+ ); +}; + +export default TableHeader; diff --git a/src/Pages/ReSeller/Profile/Form/PersonalDetailsForm.tsx b/src/Pages/ReSeller/Profile/Form/PersonalDetailsForm.tsx index 96d9ed5..da24c58 100644 --- a/src/Pages/ReSeller/Profile/Form/PersonalDetailsForm.tsx +++ b/src/Pages/ReSeller/Profile/Form/PersonalDetailsForm.tsx @@ -18,24 +18,43 @@ const PersonalDetailsForm = () => {
+ + + + + + + { /> -
); diff --git a/src/Routes.tsx b/src/Routes.tsx index 02ddcf1..815d7af 100644 --- a/src/Routes.tsx +++ b/src/Routes.tsx @@ -37,10 +37,11 @@ const User = React.lazy(() => import("./Pages/Admin/User/Page")); const QuestionBank = React.lazy(() => import("./Pages/Admin/QuestionBank/Page")); const Notifications = React.lazy(() => import("./Pages/Admin/Notifications/Page")); const Profile = React.lazy(() => import("./Pages/Admin/Profile/Page")); +const Setting = React.lazy(() => import("./Pages/Admin/Setting/Page")); + -const Roles = React.lazy(() => import("./Pages/Admin/Roles/Page")); const Permissions = React.lazy(() => import("./Pages/Admin/Roles/Permissions/Page")); - +const Roles = React.lazy(() => import("./Pages/Admin/Roles/Page")); const Report = React.lazy(() => import("./Pages/Admin/Report/Page")); const Param = React.lazy(() => import("./Pages/Admin/Param/Page")); @@ -205,7 +206,7 @@ export const menuItems: TMenuItem[] = [ element: , icon: , text: "sidebar.profile", - path: `//${ABILITIES_ENUM?.PROFILE}`, + path: `/${ABILITIES_ENUM?.PROFILE}`, abilities: ABILITIES_ENUM?.Profile_RE_SELLER, abilities_value: ABILITIES_VALUES_ENUM.INDEX, prevPath: 0, @@ -338,6 +339,14 @@ export const CrudRoute: TCrudRoute[] = [ abilities_value: ABILITIES_VALUES_ENUM.INDEX, prevPath: 0, }, + { + header: "page_header.setting", + element: , + path: `/${ABILITIES_ENUM?.SETTING}`, + abilities: ABILITIES_ENUM?.SETTING, + abilities_value: ABILITIES_VALUES_ENUM.INDEX, + prevPath: 0, + }, //// RE_SELLER { header: "page_header.notifications", diff --git a/src/Styles/Pages/index.scss b/src/Styles/Pages/index.scss index a1122fc..3e2a456 100644 --- a/src/Styles/Pages/index.scss +++ b/src/Styles/Pages/index.scss @@ -13,4 +13,5 @@ @import './InfoCard.scss'; @import './notifications.scss'; @import './profile.scss'; -@import './collections.scss' +@import './collections.scss'; +@import './setting.scss'; diff --git a/src/Styles/Pages/reSeller.scss b/src/Styles/Pages/reSeller.scss index cff1520..dafc561 100644 --- a/src/Styles/Pages/reSeller.scss +++ b/src/Styles/Pages/reSeller.scss @@ -4,6 +4,13 @@ gap: 20px; background: var(--bg); padding: 40px 10px; + .ValidationField{ + label{ + font-weight: 600; + font-size: 16px !important; + color: var(--secondary) !important; + } + } > * { // max-width: 30%; flex-basis: 31%; @@ -21,7 +28,7 @@ } } -.resellerButton { +.resellerButton,.file_setting_buttons { display: flex; align-items: center; justify-content: flex-end; diff --git a/src/Styles/Pages/setting.scss b/src/Styles/Pages/setting.scss new file mode 100644 index 0000000..630f51f --- /dev/null +++ b/src/Styles/Pages/setting.scss @@ -0,0 +1,153 @@ +.setting_tabs { + border-top: 1px solid var(--border-color-2); + + .ant-tabs-nav { + width: 20%; + } + + .ant-tabs-nav-list { + width: 100% !important; + border-left: 1px solid var(--border-color-2); + padding-left: 20px; + } + + .ant-tabs-tab { + margin-top: 10px; + color: var(--secondary); + } + + .ant-tabs-tab-active { + background: #3D5EE11A !important; + border-radius: 8px 0 0 8px; + border-right: 1px solid #3D5EE11A; + margin-left: 0 !important; + } + + .ant-tabs-content-holder { + padding: 20px 0 !important; + } + + .ant-tabs-content-holder { + border: none; + margin-right: 20px; + padding-top: 20px !important; + padding-left: 0 !important; + + } + + .ant-tabs-tabpane-active { + padding-left: 0 !important; + } + + .notification { + .setting_notification_body { + padding: 10px 20px; + box-shadow: 0px 0px 32px 0px #080F3414; + border: 1.5px solid #E9EDF4; + border-radius: 10px; + background: #fff; + } + } +} + + +.setting_tab_header, +.notification_card, +.security_card { + display: flex; + justify-content: space-between; + align-items: center; + border-bottom: 1px solid var(--border-color-2); + padding-block: 10px 20px; + + div { + display: flex; + flex-direction: column; + gap: 10px; + + h5 { + color: var(--secondary); + font-size: 1.4vw; + } + + p { + font-size: 1.1vw; + color: var(--value); + } + + .file_setting_buttons { + display: flex !important; + flex-direction: row; + } + } +} + +.setting_tab_header { + width: 100%; + margin-bottom: 30px; +} + +.notification_card{ + &:nth-last-child(1) { + border: none; + } + h5 { + font-size: 1.2vw !important; + } + + p { + font-size: .9vw !important; + } + .ant-form-item, + .ant-form-item-control-input-content { + height: 3vh; + gap: 0 !important; + margin-bottom: 0 !important; + } + .ant-checkbox .ant-checkbox-inner { + width: 25px; + height: 25px; + border: 2px solid var(--border-color-2); + } +} +.security_card{ + padding: 20px 20px; + box-shadow: 0px 0px 32px 0px #080F3414; + border: 1.5px solid #E9EDF4; + border-radius: 10px; + background: #fff; + margin-block: 20px ; + h5 { + font-size: 1.2vw !important; + } + + p { + font-size: .9vw !important; + } + +} + +.security_setting_button{ + display: flex; + align-items: center; + justify-content: center; + outline: none; + border: 2px solid var(--primary); + border-radius: 7px; + padding: 22px 15px !important; + color: var(--primary); + gap: 5px; + &:hover{ + border: 2px solid var(--primary) !important; + background: var(--primary) !important; + color: var(--white) !important; + } +} +.security_setting_button_danger{ + border-color:var(--warning); + color: var(--warning); + &:hover{ + border: 2px solid var(--warning) !important; + background: var(--warning) !important; + } +} \ No newline at end of file diff --git a/src/enums/abilities.ts b/src/enums/abilities.ts index cac07e7..fe335e8 100644 --- a/src/enums/abilities.ts +++ b/src/enums/abilities.ts @@ -55,7 +55,8 @@ export enum ABILITIES_ENUM { NOTIFICATIONS_RE_SELLER = "notification_re_seller" , Profile_RE_SELLER = "profile_re_seller" , Sales = "sales", - Collections = "collections" + Collections = "collections", + SETTING = "setting" //// } diff --git a/src/faker/item.ts b/src/faker/item.ts index bb4990b..cb88067 100644 --- a/src/faker/item.ts +++ b/src/faker/item.ts @@ -4,4 +4,14 @@ export const CollectionData = [ {label:"المستحقات",value:"2.000.000"}, {label:"تم تحصيله",value:"2.000.000"}, {label:"المتبقي",value:"2.000.000"}, + ] + + + export const NotificationData = [ + {label:"إشعارات البريد الإلكتروني",value:"يمكن أن ترسل لك Substance إشعارات عبر البريد الإلكتروني لأي رسائل مباشرة جديدة"}, + {label:"إشعارات البريد الإلكتروني",value:"يمكن أن ترسل لك Substance إشعارات عبر البريد الإلكتروني لأي رسائل مباشرة جديدة"}, + {label:"إشعارات البريد الإلكتروني",value:"يمكن أن ترسل لك Substance إشعارات عبر البريد الإلكتروني لأي رسائل مباشرة جديدة"}, + {label:"إشعارات البريد الإلكتروني",value:"يمكن أن ترسل لك Substance إشعارات عبر البريد الإلكتروني لأي رسائل مباشرة جديدة"}, + {label:"إشعارات البريد الإلكتروني",value:"يمكن أن ترسل لك Substance إشعارات عبر البريد الإلكتروني لأي رسائل مباشرة جديدة"}, + ] \ No newline at end of file diff --git a/src/translate/ar.json b/src/translate/ar.json index 18c61d3..9fd64f4 100644 --- a/src/translate/ar.json +++ b/src/translate/ar.json @@ -141,7 +141,8 @@ "managers":"مدراء", "sales":"المبيعات", "hide_hint":"اخفاء الشرح", - "show_hint":"عرض الشرح" + "show_hint":"عرض الشرح", + "setting":"الإعدادات" }, "columns": { "id": "الرقم التعريفي", @@ -283,7 +284,23 @@ "sorry_something_went_wrong": "عفوا ، حدث خطأ ما", "error_404_Page_not_found._Sorry,_the_page_you_are_looking_for_does_not_exist": "خطأ 404 لم يتم العثور على الصفحة. عذرا الصفحة التي تبحث عنها غير موجودة ", "return_to_the_dashboard": "العودة إلى لوحة القيادة", - "save_changes":"حفظ التغييرات" + "save_changes":"حفظ التغييرات", + "password":"كلمة المرور", + "two_factors":"عاملان", + "verify_phone_number":"التحقق من رقم الهاتف", + "email_address":"عنوان البريد الإلكتروني", + "device_management":"إدارة الأجهزة", + "account_activity":"نشاط الحساب", + "deactivate_the_account":"إلغاء تنشيط الحساب", + "delete_account":"حذف الحساب", + "Set a unique password to protect the account":"تعيين كلمة مرور فريدة لحماية الحساب", + "Receive codes via SMS or email every time you log in":"تلقي الرموز عبر الرسائل القصيرة أو البريد الإلكتروني في كل مرة تقوم فيها بتسجيل الدخول", + "The phone number associated with the account":"رقم الهاتف المرتبط بالحساب", + "The email address associated with the account":"عنوان البريد الإلكتروني المرتبط بالحساب", + "Devices associated with the account":"الأجهزة المرتبطة بالحساب", + "account_activities":"أنشطة الحساب", + "This will close your account. Your account will be interactive when you log in again":"سيؤدي هذا إلى إغلاق حسابك. سيكون حسابك تفاعليا عند تسجيل الدخول مرة أخرى", + "Your account will be permanently deleted":"سيتم حذف حسابك نهائيا" }, "Table": { "header": "", @@ -870,7 +887,8 @@ "add_manager":"إضافة مدير", "collections": "التحصيلات", "sales":"المبيعات", - "edit_manager":"تعديل مدير" + "edit_manager":"تعديل مدير", + "setting":"الإعدادات" }, "page_header": { "home": "لوحة القيادة", @@ -916,7 +934,8 @@ "permissions":"اذونات", "managers":"مدراء", "collections": "التحصيلات", - "sales":"المبيعات" + "sales":"المبيعات", + "setting":"الإعدادات" }, "table": { "student": "قائمة الطلاب", @@ -927,7 +946,13 @@ "managers":"مدراء", "managers_list":"قائمة المدراء", "sales":"المبيعات", - "collections": "التحصيلات" + "collections": "التحصيلات", + "setting":"الإعدادات", + "file_setting":"إعدادات الملف", + "security_setting":"إعدادات الأمان", + "notification":"الاشعارات", + "upload_your_photo_and_personal_data_here":"قم بتحميل صورتك وبياناتك الشخصية هنا", + "get_notified_of_whats_happening_now_you_can_turn_it_off_at_any_time":"احصل على إشعار بما يحدث الآن ، يمكنك إيقاف تشغيله في أي وقت" }, "alphabet": { "A": "A", diff --git a/src/types/Setting.ts b/src/types/Setting.ts new file mode 100644 index 0000000..4f7324e --- /dev/null +++ b/src/types/Setting.ts @@ -0,0 +1,7 @@ +import { ReactElement } from "react"; + +export type SettingType = { + name:string; + description:string; + children?:ReactElement; +} \ No newline at end of file