Getting Started

template/
├── public/                # Static assets (favicon, images, etc.)
├── src/
│   ├── assets/            # Images, icons, styles (scss/, css/)
│   ├── components/        # Reusable UI components (sidebar, header, tables, etc.)
│   ├── core/
│   │   ├── data/          # Data interfaces, mock data
│   │   └── redux/         # Redux slices, store, typed hooks
│   ├── hooks/             # Custom React hooks (theme, debounce, etc.)
│   ├── layouts/           # App layout components (main, auth, etc.)
│   ├── pages/             # Main pages directory
│   │   ├── authentication/ # Authentication pages (login, register, etc.)
│   │   ├── dashboard/     # Dashboard pages and charts
│   │   ├── doctors/       # Doctor management pages
│   │   ├── patients/      # Patient management pages
│   │   ├── appointments/  # Appointment management
│   │   ├── visits/        # Patient visit management
│   │   ├── lab-results/   # Laboratory results
│   │   ├── medical-results/ # Medical results
│   │   ├── pharmacy/      # Pharmacy management
│   │   ├── manage-module/ # System management (invoices, staff, settings)
│   │   └── ui-interface/  # UI components and examples
│   ├── routes/            # Routing configuration (React Router)
│   ├── utils/             # Utility functions and helpers
│   │   ├── constants/     # Application constants and configuration
│   │   ├── formatters/    # Data formatting utilities
│   │   ├── helpers/       # Helper functions (date, string)
│   │   ├── storage/       # Storage utilities (localStorage, sessionStorage)
│   │   ├── validators/    # Validation functions (email, password)
│   │   └── index.ts       # Main export file
│   ├── i18n.ts            # Internationalization setup
│   └── main.tsx           # App entry point
├── package.json
└── README.md

You can change the logo in your React project by following these steps:

1. Replace the Logo Image:
   • Place your new logo image (e.g., logo.svg or logo.png) in the src/assets/img/logo/ folder.
2. Update the Logo Import in Your Component:
   • Open the React component where the logo is used (commonly src/components/Header.tsx, Navbar.tsx, or similar).
   • Update the import statement to use your new logo file. For example:

   import logo from '../assets/img/logo/logo.svg';

3. Update the Logo Usage in JSX:
   • Replace the <img> tag's src attribute to use the imported logo variable:

   {``}

4. Save and View Changes:
   • Save the file and check your app in the browser. The new logo should appear in place of the old one.

You can change the font in your React project by following these detailed steps:

1. Choose a Font:
   • Visit Google Fonts or another font provider and select your desired font (e.g., Inter, Roboto, etc.).
2. Add the Font Import to Your CSS:
   • Copy the @import statement provided by Google Fonts.
   • Paste it at the very top of your main CSS file (e.g., src/assets/css/style.css or src/assets/scss/main.scss):

   @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

3. Update the font-family in CSS:
   • In the same CSS file, set the font-family for the body (or a specific class/component):

   body {
     font-family: 'Inter', sans-serif;
   }

4. You can also target specific elements or classes if you want to use different fonts in different places.
5. Save and Check Your App:
   • Save your CSS file and reload your app in the browser. The new font should be applied site-wide or wherever you specified.

Theme Settings in this React app let you customize the look and feel of the interface instantly. You can access the Theme Settings panel by clicking the settings (gear) icon, usually found in the top bar or sidebar of the app.

• Where to find it: The Theme Settings panel is implemented as a React component called ThemeSettings (located at src/components/theme-settings/themeSettings.tsx). It can be opened from the UI by clicking the settings icon.
• How it works: When you change a setting in the panel, it updates the app's Redux state and saves your preferences to localStorage. The app then updates the <html> element's attributes (like data-layout, data-sidebar, etc.), so the CSS can apply the correct styles immediately.

Available Layout Options:

• default – Standard sidebar and topbar layout
• mini – Collapsed sidebar for more content space
• hoverview – Sidebar expands on hover
• hidden – Sidebar is hidden
• full-width – Content uses the full width of the screen

Sidebar Color Options:

• light – Light sidebar
• sidebar2 to sidebar7 – Various preset sidebar color themes
• gradientsidebar1 to gradientsidebar7 – Gradient sidebar color themes

Topbar Color Options:

• white – White topbar
• topbar1 to topbar6 – Preset topbar color themes
• gradienttopbar1 to gradienttopbar7 – Gradient topbar color themes

Theme Color Options:

• primary (default)
• secondary
• orange
• teal
• purple
• indigo
• info

You can also switch between Light and Dark modes, adjust the content width (fluid or boxed), and set the text direction (ltr or rtl) from the same panel. All changes are applied instantly and saved for your next visit.

Internationalization (i18n) in this React app allows you to support multiple languages and easily switch between them. This is useful for making your app accessible to a global audience.

• Where to find it: The i18n setup is in src/i18n.ts and uses react-i18next and i18next libraries. Language switching is typically handled in the header or via a language selector component.
• How it works: All translations are defined in src/i18n.ts. The app uses the useTranslation hook to access the t function for translating text. When you change the language, the UI updates instantly to reflect the selected language.

Supported Languages:

• en – English (default)
• de – German
• fr – French
• ar – Arabic (RTL)

How to add a new language:

• Add your translations in src/i18n.ts under a new language key.
• Update the language switcher (usually in the header) to include your new language.

You can use the useTranslation hook in your components to translate any text. Example:

{`const { t } = useTranslation();
return 
{t('welcome_message')}
;`}

All language changes are instant and persistent for the user.

RTL (Right-to-Left) support allows your app to display content for languages like Arabic or Hebrew. The layout and text direction automatically switch when a RTL language is selected.

• How to enable: Select a RTL language (like ar) from the language switcher. The app will set dir="rtl" on the <html> element and update styles accordingly.
• Where to find: RTL logic is handled in src/i18n.ts and the theme settings Redux slice. The UI will automatically adapt when dir is set to rtl.

No extra configuration is needed—just select a RTL language and the app will handle the rest.

Code Example:

// Change language to Arabic (RTL)
i18n.changeLanguage('ar');
// The app will automatically set 

Dark Mode lets users switch the app's appearance to a darker color scheme, which is easier on the eyes in low-light environments.

• How to enable: Open the Theme Settings panel (settings icon) and select Dark mode. This sets data-bs-theme="dark" on the <html> element.
• Where to find: Dark mode logic is handled in the ThemeSettings component and Redux theme slice. The CSS uses the data-bs-theme attribute to apply dark styles.

Your dark mode preference is saved and will be remembered next time you visit the app.

Code Example:

// Enable dark mode via ThemeSettings handler
handleUpdateTheme('data-bs-theme', 'dark');
// Or manually set attribute:
document.documentElement.setAttribute('data-bs-theme', 'dark');

Lazy Routing improves performance by loading route components only when they are needed, reducing the initial bundle size.

• How it works: The app uses React.lazy and Suspense to load route components on demand. This is set up in the routing configuration (usually in src/routes/).
• How to add a lazy route: Import your component with React.lazy(() => import('./MyComponent')) and wrap your routes with <Suspense fallback={...}>.

Lazy loading routes helps your app load faster and improves the user experience, especially for large projects.

Code Example:

import React, { Suspense, lazy } from 'react';

const MyComponent = lazy(() => import('./MyComponent'));
											
// In your router:
<Suspense fallback={<div>Loading...</div>}>
<Route path="/component" element={<MyComponent />} />
</Suspense>