# Settings Module This manual provides an overview of the entire "Settings" section located in the left navigation panel of the application. This module serves as the central administrative hub where you can configure and customize almost every aspect of your application's behavior, appearance, and data management. # Company Settings
This manual explains how to configure your company's basic information within the application. This information is often used across various modules like invoices, reports, and communication. ### Accessing Company Settings 1. From the left sidebar, click on "Company Settings". ### Overview of Company Settings Page This page contains essential fields for your company's identity and contact information. Fields marked with a red asterisk (\*) are mandatory. **1. Company Name**\* - **Purpose:** The official name of your company. This name will likely appear on invoices, emails, and other system-generated documents. - **Current Setting (Example):** `Adam Test` - **How to Change:** Type your company's full legal name into this text field. **2. Company Email**\* - **Purpose:** The primary email address for your company. This is often used for system-generated communications and as a contact point. - **Current Setting (Example):** `Kawaguci1708@gmail.com` - **How to Change:** Type your company's official email address into this text field. **3. Company Phone**\* - **Purpose:** The primary contact phone number for your company. - **Current Setting (Example):** `0132027162` - **How to Change:** Type your company's phone number into this text field. **4. Company Website** - **Purpose:** The official website URL for your company. This is an optional field. - **Example:** `e.g. https://www.example.com` - **How to Change:** Type your company's website address, including `https://` or `http://`, into this text field. ### Saving Your Changes 1. After making any modifications to your company settings, click the green "Save" button. 2. Your changes will be saved and applied throughout the application where company information is displayed.
# Business Addres ## Adding a New Address To add a new address to your profile or for a transaction, follow these steps: 1. Click on the **"Add New Address"** option. 2. From the **"Country"** dropdown menu, select the relevant country (e.g., Afghanistan, Albania, Algeria). 3. In the **"Location"** field, enter the specific city, state, or region. This field is required. 4. If applicable, enter the **"Tax Name"** and **"Tax"** details. 5. Provide the complete **"Address"** in the designated field. This field is also required. 6. Optionally, enter the **"Latitude"** and **"Longitude"** coordinates if you have them. Fields marked with an asterisk (\*) are mandatory and must be filled out to successfully add the new address. # App Setting # App Settings ### App Settings Tab This tab contains the following configurable options: **1. Date Format** - **Purpose:** Determines how dates are displayed throughout the application. - **Current Setting (Example):** `d-m-Y (27-06-2025)` - **How to Change:** Click the dropdown menu and select your desired date format. **2. Time Format** - **Purpose:** Determines how times are displayed throughout the application. - **Current Setting (Example):** `12 Hour(s) (08:27 pm)` - **How to Change:** Click the dropdown menu and select your desired time format (e.g., 12-hour or 24-hour format). **3. Default Timezone** - **Purpose:** Sets the default timezone for the application, which impacts timestamp displays and scheduling. - **Current Setting (Example):** `Asia/Kuala_Lumpur` - **How to Change:** Click the dropdown menu and select your desired default timezone. **4. Default Currency** - **Purpose:** Sets the default currency used for financial transactions and displays within the application. - **Current Setting (Example):** `RM (MYR)` - **How to Change:** Click the dropdown menu and select your desired default currency. **5. Language** - **Purpose:** Sets the default language for the application's user interface. - **Current Setting (Example):** `English` - **How to Change:** Click the dropdown menu and select your preferred language. **6. Datatable Row Limit** - **Purpose:** Controls the maximum number of rows displayed per page in data tables throughout the application. This can impact performance for very large datasets. - **Current Setting (Example):** `100` - **How to Change:** Enter your desired row limit in the provided text field. **7. Employee can export data** - **Purpose:** This checkbox determines whether employees have the permission to export data from the application. - **Current Setting (Example):** Checked (meaning employees *can* export data) - **How to Change:** Check or uncheck the box to enable or disable data export for employees. # Client Sign Up Settings ### Overview of Client Sign Up Settings Tab This tab allows you to enable or disable client self-registration and provides the URL for client sign-up. ### Configurable Options **1. Allow Client Signup** - **Purpose:** This checkbox controls whether clients are permitted to register themselves directly through a sign-up link. - If checked: Clients can register using the provided "Client Signup URL". - If unchecked: Clients cannot self-register, and you would typically manage client accounts manually. - **How to Change:** Click the checkbox to enable or disable client signup. **2. Client Signup URL** - **Purpose:** This is the unique web address that clients will use to register for your service if "Allow Client Signup" is enabled. - **Display:** The URL is displayed in a non-editable text field. - **Copy Functionality:** - To easily share the URL, click the "Copy" button next to the URL field. This will copy the URL to your clipboard, allowing you to paste it into emails, websites, or other communication channels. - **Important Note:** Below the URL, there's a message: "*(This URL will be used by the client to register on the website.)*" This reinforces the purpose of the URL. ### Saving Your Changes After making any modifications (i.e., checking or unchecking "Allow Client Signup"): 1. Click the green "Save" button at the bottom of the "Client Sign Up Settings" section. 2. A confirmation message should appear to indicate that your settings have been successfully saved. # Profile Settings # Profile ### Profile Tab This tab contains the following configurable options: **1. Profile Picture** - **Purpose:** Allows you to upload or change your profile picture. - **How to Change:** - **Upload:** Drag and drop a file into the designated area or click "Drop a file or click to replace" to browse for an image file on your computer. - **Remove:** If a picture is already uploaded, click the "Remove" button to delete it. **2. Your Name** - **Purpose:** Displays and allows you to edit your full name. - **Current Value (Example):** `Adam Harith` - **How to Change:** Click inside the text field and type your desired name. **3. Your Email** - **Purpose:** Displays your registered email address. This is usually your login email. - **Current Value (Example):** `example@gmail.com` - **Note:** This field may or may not be editable depending on system configuration. **4. Your Password** - **Purpose:** Allows you to change your account password. - **Requirement:** "Must have at least 8 characters". - **How to Change:** - Enter your new password in the first field. - (An implied second field for confirmation would typically appear, though not fully visible). - **Leave blank to keep the current password.** - **Visibility Toggle:** Click the "eye" icon to show or hide the characters in the password field. - **Generate Password:** Click the "shuffle" icon to automatically generate a strong password. **5. Receive email notifications?** - **Purpose:** Controls whether you receive email notifications from the application. - **Options:** - **Enable:** Select this radio button to receive email notifications. - **Disable:** Select this radio button to stop receiving email notifications. **6. Enable Google Calendar** - **Purpose:** Allows integration with your Google Calendar, potentially for syncing events or appointments. - **Options:** - **Yes:** Select this radio button to enable Google Calendar integration. - **No:** Select this radio button to disable Google Calendar integration. **7. Country** - **Purpose:** Specifies your country of residence. - **How to Change:** Click the dropdown menu and select your country. **8. Mobile** - **Purpose:** Allows you to enter your mobile phone number. - **Format:** Includes a country code selector (e.g., `+93`) and a field for the rest of the number (e.g., `e.g. 1234567890`). - **How to Change:** Select your country code from the flag dropdown, then enter your mobile number. **9. Change Language** - **Purpose:** Sets the language for your individual user interface, overriding the default app setting if different. - **Current Value (Example):** `English` - **How to Change:** Click the dropdown menu and select your preferred language. **10. Gender** - **Purpose:** Specifies your gender. - **Current Value (Example):** `Male` - **How to Change:** Click the dropdown menu and select your gender. **11. Date of Birth** - **Purpose:** Allows you to enter your date of birth. - **How to Change:** Click the "Select Date" field to open a calendar picker and choose your date of birth. **12. Slack Member ID** - **Purpose:** (Likely for integration with Slack) Allows you to enter your Slack Member ID. - **How to Change:** Enter your Slack Member ID in the provided text field. **13. Marital Status** - **Purpose:** Allows you to specify your marital status. - **Current Value (Example):** `Single` - **How to Change:** Click the dropdown menu and select your marital status. **14. Your Address** - **Purpose:** Allows you to enter your full residential address. - **Example Format:** `e.g. 132, My Street, Kingston, New York 12401` - **How to Change:** Type your address into the multi-line text field. **15. About** - **Purpose:** A free-text field where you can write a brief description about yourself or any relevant information. - **How to Change:** Type your information into the multi-line text field. ### Saving Your Changes After making any modifications to your profile settings: 1. Click the green "Save" button at the bottom of the "Profile" tab. 2. A success message (e.g., "Profile updated successfully") should appear to confirm your changes. # Emergency Contacts ### Overview of the "Add New Emergency Contact" Fields The modal requires you to fill in the following information for your emergency contact. Fields marked with a red asterisk (\*) are mandatory. **1. Name**\* - **Purpose:** The full name of your emergency contact. - **Example:** `e.g. John Doe` - **How to Fill:** Type the full name of the emergency contact into this field. **2. Email** - **Purpose:** The email address of your emergency contact. This field is optional. - **Example:** `e.g. johndoe@example.com` - **How to Fill:** Type the email address into this field. **3. Mobile**\* - **Purpose:** The mobile phone number of your emergency contact. This is a mandatory field. - **Example:** `e.g. 1234567890` - **How to Fill:** Type the mobile phone number into this field. **4. Relationship**\* - **Purpose:** Describes your relationship to the emergency contact (e.g., father, sister, friend). This is a mandatory field. - **Example:** `e.g. father` - **How to Fill:** Type your relationship to the emergency contact into this field. **5. Address** - **Purpose:** The physical address of your emergency contact. This field is optional. - **Example:** `e.g. 132, My Street, Kingston, New York 12401` - **How to Fill:** Type the full address into this multi-line text field. ### Actions within the Modal - **Cancel:** Click the "Cancel" button to close the modal window without saving any new emergency contact information. - **Save:** Click the green "Save" button to add the new emergency contact with the information you have entered. If mandatory fields are left blank, you will receive an error message prompting you to complete them. - **Close (X icon):** Click the 'x' icon in the top right corner of the modal window to close it without saving, similar to the "Cancel" button. # Documents ### Overview of the "Add File" Fields The modal requires you to fill in the following information to upload a document. Fields marked with a red asterisk (\*) are mandatory. **1. File name**\* - **Purpose:** To give a recognizable name to the file you are uploading. This name will be displayed in the list of your documents. - **How to Fill:** Type the desired name for your file into this text field. **2. Upload File**\* - **Purpose:** To select and upload the document from your computer. - **How to Upload:** - **Drag & Drop:** Drag a file from your computer's file explorer and drop it into the designated cloud icon area. - **Choose a file:** Click on the "Choose a file" text or the cloud icon area to open a file browser window. Navigate to the file you wish to upload, select it, and click "Open". ### Actions within the Modal - **Cancel:** Click the "Cancel" button to close the modal window without uploading the file. - **Submit:** Click the green "Submit" button to upload the file with the specified name. If mandatory fields are left blank, or if no file is selected, you will receive an error message prompting you to complete them. - **Close (X icon):** Click the 'x' icon in the top right corner of the modal window to close it without saving, similar to the "Cancel" button. # Notification Settings # Email ### Overview of Notification Settings Page This page lets you choose how you receive notifications. It has three main tabs: - **Email:** Manage which notifications you receive via email. - **Slack:** (Indicated by tab) Configure notifications sent to Slack. - **Push Notification:** (Indicated by tab) Manage push notifications. ### Email Tab This tab controls which email notifications you receive. **Email Notification Settings:** On the right side of the screen, you will see a list of different events that can trigger an email notification. - **Select All:** Check this box to select or deselect all notification types at once. - **Individual Notification Checkboxes:** Each item (e.g., "New Expense Added by Admin", "New Leave Application") has a checkbox next to it. - **Checked Box:** Means you **will** receive an email notification for that specific event. - **Unchecked Box:** Means you **will not** receive an email notification for that specific event. - **How to Use:** Simply check or uncheck the boxes next to each notification type to customize your email alerts. ### Saving Your Changes 1. After selecting your preferred email notification settings, click the green "Save" button at the bottom of the page. 2. Your changes will be saved. # Slack ### Overview of Slack Tab This tab controls which notifications are sent to Slack. **1. Status** - **Purpose:** This checkbox likely enables or disables all Slack notifications globally. - **How to Use:** Check this box to activate Slack notifications, or uncheck it to turn them off entirely. **2. Slack Notification Settings** On the right side of the screen, you will see a list of different events that can trigger a Slack notification. - **Select All:** Check this box to select or deselect all notification types at once. - **Individual Notification Checkboxes:** Each item (e.g., "New Expense Added by Admin", "New Leave Application") has a checkbox next to it. - **Checked Box:** Means you **will** receive a Slack notification for that specific event. - **Unchecked Box:** Means you **will not** receive a Slack notification for that specific event. - **How to Use:** Simply check or uncheck the boxes next to each notification type to customize your Slack alerts. ### Actions within the Slack Tab - **Save:** Click the green "Save" button at the bottom of the page to apply all your selected Slack notification settings. - **Send Test Notification:** Click this button to send a test notification to your configured Slack channel. This helps you verify that the integration is working correctly. # Push Notification ### Overview of Push Notification Tab This tab controls which events trigger a push notification. **Push Notification Settings** On the right side of the screen, you will find a list of various events that can generate a push notification. - **Select All:** Check this box to quickly select or deselect all available push notification types at once. - **Individual Notification Checkboxes:** Each item (e.g., "New Expense Added by Admin", "New Leave Application") has a checkbox next to it. - **Checked Box:** Indicates that you **will** receive a push notification for that specific event. - **Unchecked Box:** Indicates that you **will not** receive a push notification for that specific event. - **How to Use:** Simply check or uncheck the boxes next to each notification type to customize the push alerts you receive. ### Saving Your Changes 1. After selecting your preferred push notification settings, click the green "Save" button at the bottom of the page. 2. Your changes will be saved and applied. # Currency Settings ### Overview of "Add New Currency" Fields The modal requires you to fill in various details for the new currency. Fields marked with a red asterisk (\*) are mandatory. **Currency Information Fields:** **1. Currency Name**\* - **Purpose:** The full name of the currency (e.g., US Dollar, Euro). - **Example:** `e.g. Dollar` - **How to Fill:** Type the full name of the currency. **2. Currency Symbol**\* - **Purpose:** The symbol used to represent the currency (e.g., $, €, £). - **Example:** `e.g. $` - **How to Fill:** Type the symbol for the currency. **3. Currency Code**\* - **Purpose:** The international three-letter code for the currency (e.g., USD, EUR, GBP). - **Example:** `e.g. USD` - **How to Fill:** Type the three-letter currency code. **4. Is Cryptocurrency** - **Purpose:** To indicate if the currency being added is a cryptocurrency. - **Options:** - **Yes:** Select this radio button if it's a cryptocurrency. - **No:** Select this radio button if it's a traditional (fiat) currency. - **How to Select:** Click on the appropriate radio button. **5. Exchange Rate**\* - **Purpose:** The conversion rate of this new currency relative to your base currency (indicated as "RM To RM"). This is a mandatory field. - **Example:** `e.g. 10000` - **How to Fill:** Enter the exchange rate. For example, if adding USD and your base currency is RM, and 1 USD = 4.70 RM, you would enter "4.70". - **Fetch latest exchange rate:** Click this link to automatically retrieve the most current exchange rate (functionality depends on system integration). **Currency Format Settings:** These settings determine how the currency amount will be displayed throughout the application. **1. Currency Position** - **Purpose:** Specifies where the currency symbol appears in relation to the amount. - **Options:** - **Left:** Symbol appears before the amount (e.g., $1,000.00). - (Other options like "Right" would likely be available in the dropdown). - **How to Select:** Click the dropdown menu and choose the desired position. **2. Thousand Separator** - **Purpose:** The character used to separate thousands in large numbers. - **Example:** `,` (comma) - **How to Fill:** Enter the character you want to use as a thousand separator (e.g., comma, period, space). **3. Decimal Separator** - **Purpose:** The character used to separate the whole number from the fractional part (cents/pennies). - **Example:** `.` (period) - **How to Fill:** Enter the character you want to use as a decimal separator (e.g., period, comma). **4. Number of Decimals** - **Purpose:** The number of digits displayed after the decimal point. - **Example:** `2` - **How to Fill:** Enter the desired number of decimal places. **Example Display:** - Below the format settings, an example (`Example - RM1,234,567.89`) is shown, which dynamically updates based on your chosen format settings, helping you visualize the output. ### Actions within the Modal - **Cancel:** Click the "Cancel" button to close the modal window without adding the new currency. - **Save:** Click the green "Save" button to add the new currency with all the specified details. If mandatory fields are incomplete, you will receive a prompt to fill them. - **Close (X icon):** Click the 'x' icon in the top right corner of the modal window to close it without saving, similar to the "Cancel" button. # Payment Credentials ### Overview of Payment Credentials Page This page is structured with tabs, each representing a different payment gateway. You can switch between these tabs to configure the settings for each payment provider. The visible tabs include: - **Paypal** (Currently selected) - **Stripe** - **Razorpay** - **Paystack** - **Mollie** - **Payfast** - **More...** (Indicates there are more payment gateway options available) Each tab will have specific settings relevant to that payment gateway. The red dot next to a payment gateway name (e.g., Stripe, Razorpay) likely indicates that it is not yet configured or is inactive. ### Paypal Tab (Currently Selected) This section allows you to enable and save your PayPal payment gateway settings. **1. Paypal Status** - **Purpose:** This checkbox controls whether the PayPal payment gateway is active or inactive for your system. - **How to Use:** - **Check the box:** To enable PayPal as a payment option. - **Uncheck the box:** To disable PayPal as a payment option. - **Note:** When the box is checked, you would typically see additional fields appear below it (e.g., API Username, API Password, Signature, or Client ID/Secret) where you enter your PayPal account credentials. These fields are not visible in the provided screenshot but are expected for a functional setup. ### Saving Your Changes 1. After making any changes to the status or entering credentials (if visible), click the green "Save" button at the bottom of the section. 2. Your changes will be saved and applied. # Finance Settings # Invoice Setting
### Overview of Invoice Settings Tab This tab contains various options for customizing your invoices. The page is split across two screenshots, so I will combine the details here. **Invoice Display and Behavior:** **1. Invoice Logo** **2. Authorised Signatory Signature** **3. Language** **4. Due after**\* **5. Send Reminder Before** **6. Send Reminder After** **Invoice Content Options (Checkboxes):** These checkboxes control specific information displayed on the invoice. **1. Show Tax number on invoice** **2. Show Status** **3. Hsn/Sac Code Show** **4. Show Authorised Signatory** **5. Show tax calculation message** **Client info to show on invoice (Checkboxes):** These checkboxes control which client contact details are displayed on the invoice. **1. Client Name** **2. Company Name** **3. Client Email** **4. Client Address** **5. Client Phone** **6. Show Project on invoice** **Terms and Conditions:** **Other Information:** ### Saving Your Changes
# Invoice Template ### Overview of Invoice Template Tab This tab presents various pre-designed invoice templates for you to choose from. **1. Template**\* - **Purpose:** To select the visual design and layout for your invoices. The selected template will be applied to all invoices generated in the system. This is a mandatory selection. - **How to Choose:** - Browse through the available template previews displayed on the page. - Click on the template you wish to use. The currently selected template will be highlighted with a blue border (as seen with the last template in the image). ### Saving Your Changes 1. After selecting your preferred invoice template, click the green "Save" button at the bottom of the page. 2. Your changes will be saved, and all future invoices will be generated using the newly selected template. # Prefix Settings ### Overview of Prefix Settings Tab This tab allows you to customize the prefix, separator, and number of digits for the sequential numbering of different document types. Each section follows a similar pattern: - **\[Document Type\] Prefix**\*: The short code or text that comes before the number. This is a mandatory field. - **\[Document Type\] Number Separator**: The character that separates the prefix from the sequential number. - **\[Document Type\] Number Digits**: The minimum number of digits for the sequential number (e.g., 3 means 001, 002, etc.). - **\[Document Type\] Number Example**: A preview of how the number will appear based on your settings. Here are the specific document types you can configure: **1. Invoice Numbering** - **Invoice Prefix**\*: - **Purpose:** Sets the prefix for your invoice numbers. - **Current Setting (Example):** `INV` - **How to Change:** Enter your desired prefix. - **Invoice Number Separator**: - **Purpose:** Sets the character between the prefix and the invoice number. - **Current Setting (Example):** `#` - **How to Change:** Enter your desired separator. - **Invoice Number Digits**: - **Purpose:** Sets the number of digits for the sequential part of the invoice number. - **Current Setting (Example):** `3` - **How to Change:** Enter the desired number of digits. - **Invoice Number Example**: Shows a live preview (e.g., `INV#001`). **2. Credit Note Numbering** - **Credit Note Prefix**\*: - **Current Setting (Example):** `CN` - **How to Change:** Enter your desired prefix. - **Credit Note Number Separator**: - **Current Setting (Example):** `#` - **How to Change:** Enter your desired separator. - **Credit Note Number Digits**: - **Current Setting (Example):** `3` - **How to Change:** Enter the desired number of digits. - **Credit Note Number Example**: Shows a live preview (e.g., `CN#001`). **3. Estimate Numbering** - **Estimate Prefix**\*: - **Current Setting (Example):** `EST` - **How to Change:** Enter your desired prefix. - **Estimate Number Separator**: - **Current Setting (Example):** `#` - **How to Change:** Enter your desired separator. - **Estimate Number Digits**: - **Current Setting (Example):** `3` - **How to Change:** Enter the desired number of digits. - **Estimate Number Example**: Shows a live preview (e.g., `EST#001`). **4. Estimate Request Numbering** - **Estimate Request Prefix**\*: - **Current Setting (Example):** `ESTRQ` - **How to Change:** Enter your desired prefix. - **Estimate Request Number Separator**: - **Current Setting (Example):** `#` - **How to Change:** Enter your desired separator. - **Estimate Request Number Digits**: - **Current Setting (Example):** `3` - **How to Change:** Enter the desired number of digits. - **Estimate Request Number Example**: Shows a live preview (e.g., `ESTRQ#001`). **5. Order Numbering** - **Order Prefix**\*: - **Current Setting (Example):** `ODR` - **How to Change:** Enter your desired prefix. - **Order Number Separator**: - **Current Setting (Example):** `#` - **How to Change:** Enter your desired separator. - **Order Number Digits**: - **Current Setting (Example):** `3` - **How to Change:** Enter the desired number of digits. - **Order Number Example**: Shows a live preview (e.g., `ODR#001`). **6. Proposal Numbering** - **Proposal Prefix**\*: - **Current Setting (Example):** `Proposal` - **How to Change:** Enter your desired prefix. - **Proposal Number Separator**: - **Current Setting (Example):** `#` - **How to Change:** Enter your desired separator. - **Proposal Number Digits**: - **Current Setting (Example):** `3` - **How to Change:** Enter the desired number of digits. - **Proposal Number Example**: Shows a live preview (e.g., `Proposal#001`). ### Saving Your Changes 1. After making any modifications to the prefix settings, click the green "Save" button at the bottom of the page. 2. Your changes will be saved and applied to new documents generated in the system. # Units ### Overview of "Add Unit Type" Fields The modal contains one mandatory field to define the new unit type. **1. Unit Type**\* - **Purpose:** To define a new unit of measurement (e.g., "Hour", "Kilogram", "Piece", "Liter", "Galon" as seen in the background). - **Example:** `Enter a category name` - **How to Fill:** Type the name of the unit type into this text field. ### Actions within the Modal - **Close (X icon):** Click the 'x' icon in the top right corner of the modal window to close it without saving. - **Close:** Click the "Close" button to close the modal window without saving the new unit type. - **Save:** Click the green "Save" button to add the new unit type to your system. If the mandatory "Unit Type" field is left blank, you will receive an error message. # Quickbooks Settings ### Overview of Quickbooks Settings Tab This tab provides the option to enable or disable the Quickbooks integration. **Important Note:** At the top of the page, there is a crucial message: *"It is only One-Way Sync. If you create an invoice or payment here then an invoice or payment will be created on Quickbooks too."* This means that data flows *from* this application *to* Quickbooks, but not the other way around. **1. Status** - **Purpose:** This checkbox controls whether the integration with Quickbooks is active or inactive. - **How to Use:** - **Check the box:** To enable the one-way synchronization with Quickbooks. When checked, you would typically see additional fields appear (e.g., fields for Quickbooks API keys, client ID, client secret, or a "Connect to Quickbooks" button) where you authorize the connection between this application and your Quickbooks account. These fields are not visible in the provided screenshot but are essential for a functional setup. - **Uncheck the box:** To disable the Quickbooks integration. ### Saving Your Changes 1. After making any changes to the status or configuring the Quickbooks credentials (if applicable), click the green "Save" button at the bottom of the section. 2. Your changes will be saved, and the Quickbooks integration status will be updated accordingly. # Invoice Payment Details ### Overview of "Add Payment Detail" Fields The modal contains two fields for defining the payment detail. Fields marked with a red asterisk (\*) are mandatory. **1. Title**\* - **Purpose:** A short, descriptive title for the payment method you are adding (e.g., "Bank Transfer," "Credit Card," "PayPal"). - **Example:** `Payment Description` (This is likely a placeholder for what should be a more specific title). - **How to Fill:** Type a clear and concise title for the payment detail into this text field. **2. Payment Details** - **Purpose:** A detailed description of the payment method, including all necessary information for a client to make a payment. - **Guidance:** `Add Payment Method Details (e.g., Bank Account, Transfer Information)` - **How to Fill:** Type all relevant payment information into this multi-line text field. Examples include: - Bank Name, Account Number, SWIFT/IBAN code for bank transfers. - Instructions for paying via specific online methods. - Any other specific instructions for the client. ### Actions within the Modal - **Close (X icon):** Click the 'x' icon in the top right corner of the modal window to close it without saving. - **Close:** Click the "Close" button to close the modal window without saving the new payment detail. - **Save:** Click the green "Save" button to add the new payment detail to your system. If the mandatory "Title" field is left blank, you will receive an error message. # Contract Settings ### Overview of Contract Settings Page This page allows you to customize the prefix, separator, and number of digits for the sequential numbering of your contracts. **1. Contract Prefix**\* - **Purpose:** The short code or text that comes before the sequential contract number. This is a mandatory field. - **Current Setting (Example):** `CONT` - **How to Change:** Enter your desired prefix for contract numbers. **2. Contract Number Separator** - **Purpose:** The character that separates the contract prefix from the sequential number. - **Current Setting (Example):** `#` - **How to Change:** Enter the character you want to use as a separator (e.g., hash, hyphen, underscore). **3. Contract Number Digits** - **Purpose:** The minimum number of digits for the sequential part of the contract number. If the sequential number is shorter, it will be padded with leading zeros. - **Current Setting (Example):** `3` (meaning numbers will appear as 001, 002, 010, 100, etc.) - **How to Change:** Enter the desired number of digits. **4. Contract Number Example** - **Purpose:** A real-time preview of how a contract number will appear based on your chosen settings. - **Example:** `CONT#001` ### Saving Your Changes 1. After making any modifications to the contract numbering settings, click the green "Save" button. 2. Your changes will be saved and applied to new contracts generated in the system. # Tax Settings ### Overview of "Add Tax" Fields The modal contains two mandatory fields for defining the new tax. Fields marked with a red asterisk (\*) are mandatory. **1. Tax Name**\* - **Purpose:** A descriptive name for the tax (e.g., "GST", "Sales Tax", "VAT", "Service Tax"). - **How to Fill:** Type the name of the tax into this text field. **2. Rate**\* - **Purpose:** The percentage rate of the tax. - **How to Fill:** Enter the numerical value of the tax rate (e.g., for 6%, enter `6`). ### Actions within the Modal - **Cancel:** Click the "Cancel" button to close the modal window without saving the new tax. - **Save:** Click the green "Save" button to add the new tax to your system with the information you have entered. If mandatory fields are left blank, you will receive an error message prompting you to complete them. - **Close (X icon):** Click the 'x' icon in the top right corner of the modal window to close it without saving, similar to the "Cancel" button. # Ticket Agents # Ticket Agents ### Overview of "Add New Ticket Agent" Fields The modal contains two mandatory fields for assigning a user as a ticket agent and optionally assigning them to a group. Fields marked with a red asterisk (\*) are mandatory. **1. Choose Agents**\* - **Purpose:** To select an existing user from your system who will be designated as a ticket agent. - **Current Selection (Example):** `Adam Harith` (with "It's you" indicating this user is currently logged in). - **How to Select:** Click the dropdown menu and select the user you wish to assign as a ticket agent. **2. Assign Group** - **Purpose:** To assign the selected ticket agent to a specific group, which can help in organizing and routing tickets. This field is optional. - **Current Selection (Example):** `Nothing selected` - **How to Select:** Click the dropdown menu and select the group you want to assign the agent to. ### Actions within the Modal - **Cancel:** Click the "Cancel" button to close the modal window without saving the new ticket agent. - **Save:** Click the green "Save" button to add the selected user as a ticket agent. If the mandatory "Choose Agents" field is left blank, you will receive an error message prompting you to complete it. - **Close (X icon):** Click the 'x' icon in the top right corner of the modal window to close it without saving, similar to the "Cancel" button. # Ticket Groups ### Overview of "Manage Groups" Fields The modal allows you to view existing groups and add new ones. **Existing Groups Section:** - **\#:** This column would display the serial number for each group. - **Group:** This column would list the names of currently added groups. - **Action:** This column would typically contain options to edit or delete existing groups. - **Current Status:** "No group added." indicates that no groups have been created yet. **Add New Group Section:** **1. Group Name**\* - **Purpose:** To define a new group for organizing your ticket agents (e.g., Sales, Support, Technical). This is a mandatory field. - **Example:** `e.g. Sales, Support, etc.` - **How to Fill:** Type the desired name for the new group into this text field. ### Actions within the Modal - **Cancel:** Click the "Cancel" button to close the modal window without adding a new group. - **Save:** Click the green "Save" button to add the new group with the specified name. If the mandatory "Group Name" field is left blank, you will receive an error message prompting you to complete it. - **Close (X icon):** Click the 'x' icon in the top right corner of the modal window to close it without saving, similar to the "Cancel" button. # Ticket Types ### Overview of "Add New Ticket Type" Fields The modal contains one mandatory field for defining the new ticket type. Fields marked with a red asterisk (\*) are mandatory. **1. Ticket Type**\* - **Purpose:** To define a new category for tickets (e.g., "Support", "Question", "Sales", "Bug Report", "Feature Request"). - **Example:** `e.g. Support` - **How to Fill:** Type the desired name for the new ticket type into this text field. ### Actions within the Modal - **Cancel:** Click the "Cancel" button to close the modal window without adding a new ticket type. - **Save:** Click the green "Save" button to add the new ticket type to your system. If the mandatory "Ticket Type" field is left blank, you will receive an error message prompting you to complete it. - **Close (X icon):** Click the 'x' icon in the top right corner of the modal window to close it without saving, similar to the "Cancel" button. # Ticket Channel ### Overview of "Add Ticket Channel" Fields The modal contains one mandatory field for defining the new ticket channel. Fields marked with a red asterisk (\*) are mandatory. **1. Ticket Channel**\* - **Purpose:** To define a new method or platform through which clients can submit tickets (e.g., "Email", "Phone", "Live Chat", "Facebook", "Twitter"). - **Example:** `e.g. Facebook, Phone, etc.` - **How to Fill:** Type the desired name for the new ticket channel into this text field. ### Actions within the Modal - **Close (X icon):** Click the 'x' icon in the top right corner of the modal window to close it without saving. - **Close:** Click the "Close" button to close the modal window without adding a new ticket channel. - **Save:** Click the green "Save" button to add the new ticket channel to your system. If the mandatory "Ticket Channel" field is left blank, you will receive an error message prompting you to complete it. # Reply Templates ### Overview of Reply Templates Tab This tab displays a list of all your saved reply templates and provides options to manage them. **1. Add New Template Button** - **Purpose:** To create a new reply template. - **How to Use:** Click the green "+ Add New Template" button to open the "Add Template" modal window (as described in the previous manual). **2. Reply Templates List** This section lists all the templates you have created. - **Name:** This column displays the heading or title of each reply template. - **Action:** This column will contain options to manage each individual template: - **Edit:** Likely an "Edit" button or icon to modify an existing template. Clicking this would open a similar modal to "Add Template" but pre-filled with the template's current details. - **Delete:** Likely a "Delete" button or icon to remove a template from the list. This would usually trigger a confirmation prompt. - **Current Status:** "No template found." indicates that no reply templates have been added yet. ### Overview of "Add Template" Fields The modal contains two mandatory fields for defining the new template. Fields marked with a red asterisk (\*) are mandatory. **1. Template Heading**\* - **Purpose:** A short, descriptive title for the template. This helps you quickly identify the template later. - **Example:** `Enter template heading` - **How to Fill:** Type a clear and concise heading for your template into this text field. **2. Template Text**\* - **Purpose:** The main content or body of the template. This is the text that will be inserted when you use the template. - **Editor Features:** This field includes a rich text editor with options such as: - **Formatting:** Normal, Paragraph, Headings (H1-H6) - **Alignment:** Left, Center, Right, Justify - **Lists:** Unordered (bullet points), Ordered (numbered) - **Text Styling:** Bold, Italic, Underline, Strikethrough - **Links:** Insert/Edit Link - **Images:** Insert Image - **Media:** Insert Media (video, audio) - **Tables:** Insert Table - **Code:** Code View (toggle between rich text and HTML) - **Undo/Redo** - **Full Screen** - **Smiley Icon:** Likely to insert emojis. - **How to Fill:** Type or paste your template text into this area. Use the formatting tools to style the text as needed. ### Actions within the Modal - **Close (X icon):** Click the 'x' icon in the top right corner of the modal window to close it without saving. - **Close:** Click the "Close" button to close the modal window without adding the new template. - **Save:** Click the green "Save" button to save the new template to your system. If mandatory fields are left blank, you will receive an error message prompting you to complete them. # Round Robin ### Overview of Round Robin Tab This tab allows you to enable or disable the Round Robin ticket assignment method and provides information on how it works. **1. Round Robin Toggle** - **Purpose:** To enable or disable the Round Robin feature for automatic ticket assignment. - **How to Use:** Click the toggle switch. - **Enabled (Green/Right position):** Round Robin assignment is active. - **Disabled (Gray/Left position):** Round Robin assignment is inactive. **2. Information Section** This section provides details about the Round-Robin Method: - **Round-Robin Method:** - **Equal Distribution:** "Tasks are evenly distributed among team members." - **Sequential Assignment:** "Each task is assigned to the next team member in order." - **Fair Rotation:** "Ensures balanced workloads and prevents overload." - **Example:** - "Tickets go to Agent A, then B, then C, and repeat." - "In a customer support system, incoming tickets are assigned in a round-robin fashion. The first ticket goes to Agent A, the second to Agent B, the third to Agent C, and the fourth back to Agent A, continuing in this pattern." - **Benefit:** - "Using the round-robin method ensures fair and efficient task distribution, promotes balanced workloads, and streamlines resource allocation." # Ticket Visibility Setting ### Overview of Ticket Visibility Setting Tab This tab allows you to define the scope of ticket visibility for agents. You can choose from three different levels of access. **Settings for Ticket Agents** This section defines the "Scope for Ticket Visibility" by selecting one of the following options: **1. All Tickets** - **Purpose:** If selected, ticket agents will be able to view and edit all tickets in the system, regardless of who they are assigned to or which group they belong to. - **Description:** "Can view and edit all tickets." - **How to Select:** Click the radio button next to "All Tickets". **2. Tickets in a group** - **Purpose:** If selected, ticket agents will only be able to view and edit tickets that are within their assigned groups and tickets specifically assigned to them. - **Description:** "Can view and edit tickets in their group(s) and ticket assigned to them." - **How to Select:** Click the radio button next to "Tickets in a group". **3. Assigned Tickets** - **Purpose:** If selected, ticket agents will only be able to view and edit tickets that are directly assigned to them. They will not see tickets assigned to other agents or groups they are not part of, even if they are in those groups. - **Description:** "Can view and edit tickets assigned to them." - **How to Select:** Click the radio button next to "Assigned Tickets". ### Saving Your Changes 1. After selecting your preferred ticket visibility setting, click the green "Save" button at the bottom of the section. 2. Your changes will be saved and applied, affecting how agents can view tickets in the system. # Project Settings # Project Settings ### Overview of Project Settings Tab This tab currently offers a single setting related to project reminders. **1. Send Reminder** - **Purpose:** This checkbox likely controls whether reminders are sent for projects. The question mark icon next to it suggests there might be more information or specific configurations (e.g., *when* reminders are sent, *who* receives them) that would appear if this box is checked or upon hovering over the icon. - **How to Use:** Check or uncheck the box to enable or disable project reminders. ### Saving Your Changes 1. After making any changes to the reminder setting, click the green "Save" button. 2. Your changes will be saved. # Project Status Setting ### Overview of Project Status Settings Tab This tab displays a list of existing project statuses and provides options to add, edit, or delete them. **1. Add Status Button** - **Purpose:** To create a new project status. - **How to Use:** Click the green "+ Add Status" button to open the "Create Project Status" modal window. **2. Project Status List** This section lists all the project statuses configured in your system. - **\#:** Displays the serial number for each status. - **Name:** Displays the name of the project status (e.g., "in progress", "not started", "on hold"). Each status also has a colored dot next to it, indicating its `Label Color`. - **Default Status:** A radio button column. One status can be set as the `Default` status for new projects. - **Green "Default" icon:** Indicates the currently selected default status. - **Radio button:** Click to set a different status as the default. - **Action:** This column contains options to manage each individual status: - **Edit:** Click the "Edit" button to open the "Create Project Status" modal, pre-filled with the selected status's details, allowing you to modify it. - **Delete:** Click the "Delete" button to remove a status from the list. This usually prompts for confirmation before deletion. ### Create Project Status Modal User Manual This section explains how to use the "Create Project Status" modal window, which appears when you click "+ Add Status" or "Edit" an existing status. ### Overview of "Create Project Status" Fields The modal contains fields for defining the name, color, and active status of a project status. Fields marked with a red asterisk (\*) are mandatory. **1. Name**\* - **Purpose:** The name of the project status (e.g., "Pending," "Completed," "In Review"). - **How to Fill:** Type the desired name for the new project status into this text field. **2. Label Color**\* - **Purpose:** To assign a visual color to the project status, which helps in quickly identifying the status of projects in lists or dashboards. - **Current Setting (Example):** `#16B13D` (a hex color code) and a green color swatch. - **How to Change:** - You can directly type a hex color code into the text field. - Click the colored swatch next to the text field to open a color picker and select a color visually. **3. Status** - **Purpose:** To activate or deactivate the project status. Inactive statuses might not appear as options when assigning statuses to projects. - **Options:** - **Active:** Select this radio button to make the status available for use. - **Inactive:** Select this radio button to make the status unavailable for use. ### Actions within the Modal - **Cancel:** Click the "Cancel" button to close the modal window without saving any changes or creating a new status. - **Save:** Click the green "Save" button to save the new or updated project status to your system. If mandatory fields are left blank, you will receive an error message. - **Close (X icon):** Click the 'x' icon in the top right corner of the modal window to close it without saving, similar to the "Cancel" button. # Project Category ### Overview of Project Category Tab This tab displays a list of existing project categories and provides options to add new ones. **1. Add Category Button** - **Purpose:** To create a new project category. - **How to Use:** Click the green "+ Add Category" button to open the "Add Project Category" modal window. **2. Project Category List** This section lists all the project categories configured in your system. - **\#:** This column would display the serial number for each category. - **Category Name:** This column would list the names of currently added project categories. - **Action:** This column would typically contain options to edit or delete existing categories. - **Current Status:** "No record found." indicates that no project categories have been added yet. ### Add Project Category Modal User Manual This section explains how to use the "Add Project Category" modal window, which appears when you click "+ Add Category". ### Overview of "Add Project Category" Fields The modal contains one mandatory field for defining the new project category. Fields marked with a red asterisk (\*) are mandatory. **1. Category Name**\* - **Purpose:** The name of the project category (e.g., "Web Development," "Marketing," "Consulting"). - **Example:** `Enter a category name` - **How to Fill:** Type the desired name for the new project category into this text field. ### Actions within the Modal - **Cancel:** Click the "Cancel" button to close the modal window without saving any new category information. - **Save:** Click the green "Save" button to add the new project category to your system. If the mandatory "Category Name" field is left blank, you will receive an error message. - **Close (X icon):** Click the 'x' icon in the top right corner of the modal window to close it without saving, similar to the "Cancel" button. # Attendance Settings # Attendance Settings ### Overview of Attendance Settings Tab This tab contains various checkboxes and fields to customize how attendance is managed. **General Attendance Options (Checkboxes):** These checkboxes control specific functionalities related to employee attendance. **1. Allow employee to request shift change** - **Purpose:** If checked, employees will have the option to request changes to their assigned shifts. - **Current Setting:** Checked. - **How to Use:** Check or uncheck the box to enable or disable this feature. **2. Save Clock-In Location** - **Purpose:** If checked, the geographical location (e.g., GPS coordinates) of the employee will be recorded when they clock in. - **Current Setting:** Unchecked. - **How to Use:** Check or uncheck the box to enable or disable saving clock-in locations. **3. Allowed Employee self Clock-In/Clock-Out** - **Purpose:** If checked, employees can clock themselves in and out of the system. If unchecked, this process might require an administrator or a different method. - **Current Setting:** Checked. - **How to Use:** Check or uncheck the box to enable or disable self clock-in/clock-out. **4. Auto clock-in employee by first sign in** - **Purpose:** If checked, an employee will automatically be clocked in when they first sign into the application for the day. - **Current Setting:** Unchecked. - **How to Use:** Check or uncheck the box to enable or disable automatic clock-in upon first sign-in. **5. Clock-in check with added location Radius** - **Purpose:** If checked, this likely enables a feature where clock-ins are only valid if the employee is within a predefined geographical radius of a specific location. - **Current Setting:** Unchecked. - **How to Use:** Check or uncheck the box to enable or disable location radius check for clock-ins. **6. Allow clock-in outside shift hours** - **Purpose:** If checked, employees will be able to clock in even if it's outside their scheduled shift hours. - **Current Setting:** Unchecked. - **How to Use:** Check or uncheck the box to allow or disallow clock-ins outside shift hours. **7. Clock-in check with added IP address** - **Purpose:** If checked, this likely enables a feature where clock-ins are only valid if the employee is using a computer with a specific, pre-approved IP address. - **Current Setting:** Unchecked. - **How to Use:** Check or uncheck the box to enable or disable IP address check for clock-ins. **8. Send monthly attendance report email** - **Purpose:** If checked, a monthly attendance report will be automatically sent via email. - **Current Setting:** Unchecked. - **How to Use:** Check or uncheck the box to enable or disable monthly attendance report emails. **Week Start and Reminders:** **1. Week Starts From**\* - **Purpose:** Defines the first day of the week for attendance tracking and reporting purposes. This is a mandatory field. - **Current Setting:** `Monday` - **How to Change:** Click the dropdown menu and select the desired start day of the week. **2. Attendance Reminder Status** - **Purpose:** This toggle likely controls whether general attendance reminders are active or inactive. - **How to Use:** Click the toggle switch to enable or disable attendance reminders. ### Saving Your Changes 1. After making any modifications to the attendance settings, click the green "Save" button. 2. Your changes will be saved and applied to your attendance tracking system. # Employee Shifts ### Overview of Employee Shifts Tab This tab displays a list of all configured employee shifts and provides options to add new ones, as well as edit or delete existing shifts. **1. Add New Shift Button** - **Purpose:** To create a new employee shift. - **How to Use:** Click the green "+ Add New Shift" button to open the "Add New Shift" modal window. **2. Shift List** This section lists all the employee shifts currently defined in your system. - **Name:** Displays the name of the shift (e.g., "General Shift"). - **Time:** Shows the core timing details of the shift, such as: - Start Time - Half Day time - End Time - **Others:** Provides additional details and rules for the shift, such as: - Late mark after (minutes) - Maximum check-in allowed in a day - Office opens on (days of the week) - **Default:** A radio button column. One shift can be set as the `Default` shift for new employees or general use. - **Green "Default" icon:** Indicates the currently selected default shift. - **Radio button:** Click to set a different shift as the default. - **Action:** This column contains options to manage each individual shift: - **Edit:** Click the "Edit" button to open the "Add New Shift" modal, pre-filled with the selected shift's details, allowing you to modify it. - **Delete:** Click the "Delete" button to remove a shift from the list. This usually prompts for confirmation before deletion. --- ### Add New Shift Modal User Manual This section explains how to use the "Add New Shift" modal window, which appears when you click "+ Add New Shift" or "Edit" an existing shift. This modal allows you to define detailed parameters for a new shift. ### Overview of "Add New Shift" Fields The modal offers options for both strict and flexible timings, along with comprehensive details for the shift. Fields marked with a red asterisk (\*) are mandatory. **Shift Timing Type:** **1. Strict Timings / Flexible Timings** - **Purpose:** To choose between a fixed work schedule or a more flexible one. - **How to Select:** Click the radio button next to "Strict Timings" or "Flexible Timings". - *Note: The fields displayed below might change depending on this selection.* In the provided screenshot, "Strict Timings" appears to be implied or the default. **Shift General Information:** **1. Shift Name**\* - **Purpose:** A recognizable name for the shift (e.g., "Day Shift", "Night Shift", "General Shift"). - **Example:** `e.g. Night Shift` - **How to Fill:** Type the desired name for the shift into this text field. **2. Shift Short Code**\* - **Purpose:** A short, unique code for the shift. - **Example:** `e.g. NS` - **How to Fill:** Type a short code for the shift. **3. Color Code**\* - **Purpose:** To assign a visual color to the shift, potentially for easier identification on schedules or reports. - **Current Setting (Example):** `#16B13D` (a hex color code) and a green color swatch. - **How to Change:** You can directly type a hex color code, or click the colored swatch to open a color picker and select a color visually. **Shift Timing Details:** **1. Shift Start Time**\* - **Purpose:** The scheduled start time for the shift. - **Current Setting (Example):** `09:15 PM` - **How to Fill:** Click the field to open a time picker and select the shift's start time. **2. Shift End Time**\* - **Purpose:** The scheduled end time for the shift. - **Current Setting (Example):** `09:15 PM` - **How to Fill:** Click the field to open a time picker and select the shift's end time. **3. Auto Clock Out Time (in hours)**\* - **Purpose:** The number of hours after which an employee is automatically clocked out if they forget to do so manually. - **Current Setting (Example):** `1` - **How to Fill:** Enter the number of hours. **4. Half-day Mark Time**\* - **Purpose:** The time that marks the completion of a half-day's work. - **Current Setting (Example):** `09:15 PM` - **How to Fill:** Click the field to open a time picker and select the half-day mark time. **5. Early Clock In (in minutes)**\* - **Purpose:** The number of minutes before the Shift Start Time that an employee is allowed to clock in without being flagged as early. - **How to Fill:** Enter the number of minutes. **6. Late mark after (minutes)**\* - **Purpose:** The number of minutes after the Shift Start Time that an employee is considered late. - **How to Fill:** Enter the number of minutes. **7. Maximum check-in allowed in a day**\* - **Purpose:** The maximum number of times an employee can clock in during a single day for this shift. This can prevent accidental multiple clock-ins. - **Current Setting (Example):** `1` - **How to Fill:** Enter the maximum number of check-ins allowed. **Office Open Days:** **1. Office opens on**\* - **Purpose:** To specify the days of the week on which this shift is active or applicable. - **How to Select:** Check the box next to each day of the week (Monday, Tuesday, Wednesday, Thursday, Friday, Saturday, Sunday) that applies to this shift. ### Actions within the Modal - **Cancel:** Click the "Cancel" button to close the modal window without saving any new shift information. - **Save:** Click the green "Save" button to save the new or updated shift to your system. If mandatory fields are left blank, you will receive an error message prompting you to complete them. - **Close (X icon):** Click the 'x' icon in the top right corner of the modal window to close it without saving, similar to the "Cancel" button. # Shift Rotation ### Overview of Shift Rotation Tab This tab serves as the central hub for managing shift rotations. It provides options to add new rotation setups, automate existing ones, and manually run rotations. **Top Action Buttons:** **1. Add New Shift Rotation Button** - **Purpose:** To create a brand new shift rotation rule. - **How to Use:** Click the green "+ Add New Shift Rotation" button to open the "Add Rotation" modal window. **2. Automate Shifts Button** - **Purpose:** To set up automatic execution of existing shift rotation rules for specific employees or departments. - **How to Use:** Click the green "+ Automate Shifts" button to open the "Automate Shifts" modal window. **3. Run Rotation Button** - **Purpose:** To manually trigger and apply configured shift rotations. - **How to Use:** Click the green "+ Run Rotation" button to open the "Run Shift Rotation" modal window. **Shift Rotation List:** This section will display all the shift rotation rules you have configured. - **Rotation Name:** The name you've given to the rotation rule. - **No. of Employees:** The number of employees included in this rotation. - **Replace existing shift of employees:** Indicates whether this rotation will overwrite current employee shifts. - **Send rotation notification:** Indicates if notifications are sent when this rotation occurs. - **Status:** The current status of the rotation (e.g., Active, Inactive). - **Action:** This column would contain options to edit or delete existing rotation rules. - **Current Status:** "No data available in table" indicates that no shift rotations have been added yet. --- ### Add Rotation Modal User Manual This section explains how to define a new shift rotation rule. This modal appears when you click "+ Add New Shift Rotation". ### Overview of "Add Rotation" Fields **1. Rotation Name**\* - **Purpose:** A descriptive name for this specific shift rotation rule (e.g., "Weekly Morning/Night Swap"). - **How to Fill:** Type a clear name for the rotation. **2. Set Rotation Frequency**\* - **Purpose:** How often the shifts in this rotation should change (e.g., daily, weekly, monthly). - **How to Select:** Click the dropdown to choose the frequency. **3. Color Code**\* - **Purpose:** A visual color to represent this rotation, potentially for easy identification in schedules. - **Current Setting (Example):** `#16B13D` (green hex code) and a green color swatch. - **How to Change:** Type a hex code or use the color picker. **4. Select Shift**\* - **Purpose:** To choose the shifts that will be part of this rotation. You likely select multiple shifts here. - **How to Select:** Click the dropdown and select the shifts. **5. Replace existing shift of employees** - **Purpose:** If checked, applying this rotation will override any existing shifts assigned to the employees involved in this rotation. - **How to Use:** Check or uncheck the box. **6. Send rotation notification** - **Purpose:** If checked, employees will receive a notification when their shifts are rotated by this rule. - **How to Use:** Check or uncheck the box. **7. Shift Rotation sequences** - **Purpose:** This multi-line text area likely allows you to define the specific order or sequence in which shifts will be assigned during the rotation. This could involve listing shift names or codes in order. - **How to Fill:** Enter the sequence of shifts. ### Actions within the "Add Rotation" Modal - **Save:** Click the green "Save" button to create the new shift rotation rule. - **Cancel:** Click the "Cancel" button to close the modal without saving. - **Close (X icon):** Click the 'x' icon in the top right to close. --- ### Automate Shifts Modal User Manual This section explains how to set up an automated execution for a shift rotation. This modal appears when you click "+ Automate Shifts". ### Overview of "Automate Shifts" Fields **1. Department** - **Purpose:** To select a specific department for which this automated shift rotation should apply. This allows you to apply rotations to an entire group of employees. - **How to Select:** Click the dropdown to choose a department. **2. Employees**\* - **Purpose:** To select specific employees who will be part of this automated shift rotation. This is a mandatory field. You can select individual employees or a group if no department is chosen. - **How to Select:** Click the dropdown to select one or more employees. **3. Rotation Name**\* - **Purpose:** To select the pre-defined shift rotation rule that you want to automate. This is a mandatory field. - **How to Select:** Click the dropdown to choose a rotation rule you created previously. ### Actions within the "Automate Shifts" Modal - **Save:** Click the green "Save" button to schedule the automation of the selected shift rotation for the chosen employees/department. - **Cancel:** Click the "Cancel" button to close the modal without saving. - **Close (X icon):** Click the 'x' icon in the top right to close. --- ### Run Shift Rotation Modal User Manual This section explains how to manually trigger and apply existing shift rotation rules. This modal appears when you click "Run Rotation". ### Overview of "Run Shift Rotation" Fields **Information Message:** "You can select and run the shift rotations." **Rotation List:** This section displays a list of available shift rotations that can be manually run. - **Checkbox:** A checkbox next to each rotation name to select it for execution. - **Rotation Name:** The name of the shift rotation. - **No. of Employees:** The number of employees associated with that rotation. - **Replace existing shift of employees:** Indicates if the rotation will overwrite current employee shifts. - **Send rotation notification:** Indicates if notifications will be sent. - **Current Status:** "No data available in table" indicates no rotations are currently set up to be run. **1. Run Rotation Button** - **Purpose:** To execute the selected shift rotation(s) immediately. - **How to Use:** Check the box(es) next to the rotation(s) you wish to run, then click the green "Run Rotation" button. ### Actions within the "Run Shift Rotation" Modal - **Run Rotation:** Click this button to manually apply the selected shift rotations. - **Close (X icon):** Click the 'x' icon in the top right to close the modal. # QR Code ### Overview of QR Code Tab This tab provides options to activate the QR code for attendance, view the associated URL, and download or print the QR code image. **1. QR Code Toggle** - **Purpose:** To enable or disable the QR Code attendance system. - **How to Use:** Click the toggle switch. - **Enabled (Green/Right position):** The QR code clock-in feature is active, and employees can use it. - **Disabled (Gray/Left position):** The QR code clock-in feature is inactive. **2. QR Code URL** - **Purpose:** This is the web address that the QR code points to. When an employee scans the QR code, their device will navigate to this URL to facilitate clock-in/out. - **Display:** The URL is displayed in a non-editable text field. - **Copy Functionality:** Click the "Copy" icon (the two overlapping squares) next to the URL to copy it to your clipboard. This is useful if you need to share the URL directly. **3. QR Code Image** - **Purpose:** The visual representation of the QR code that employees will scan. - **Display:** A large, scannable QR code image is displayed in the center of the page. ### Actions for the QR Code **1. Download Button** - **Purpose:** To download the QR code image to your computer. This is useful if you want to use the image in digital documents or print it separately. - **How to Use:** Click the green "Download" button. The QR code image will be saved to your device, typically as a PNG file. **2. Print Button** - **Purpose:** To directly print the QR code from your browser. This is useful for placing physical copies of the QR code in your office or workspace. - **How to Use:** Click the "Print" button. Your browser's print dialog will appear, allowing you to configure print options and send the QR code to a printer. # Leaves Settings # Leaves Type Settings ### Overview of Leave Types Settings Tab This tab displays a list of all configured leave types and provides options to add new ones, as well as edit or delete existing leave types. **1. Add New Leave Type Button** - **Purpose:** To create a new leave category. - **How to Use:** Click the green "+ Add New Leave Type" button to open the "Add New Leave Type" modal window. **2. Leave Types List** This section lists all the leave types currently defined in your system. - **Leave Type:** Displays the name of the leave type (e.g., "Casual", "Sick", "Earned"). Each leave type also has a colored dot next to it, indicating its `Color Code`. - **Leave Allotment Type:** Shows how the leaves are allotted (e.g., "Yearly"). - **No of Leaves:** Indicates the number of leaves allotted for that type. - **Monthly Limit:** (If applicable) Displays any monthly limit for the leave type. - **Leave Paid Status:** Indicates whether the leave is paid or unpaid. - **Department:** (If applicable) Shows which department this leave type applies to. - **Designation:** (If applicable) Shows which designation this leave type applies to. - **Action:** This column contains options to manage each individual leave type: - **Edit:** Click the "Edit" button to open the "Add New Leave Type" modal, pre-filled with the selected leave type's details, allowing you to modify it. - **Delete:** Click the "Delete" button to remove a leave type from the list. This usually prompts for confirmation before deletion. --- ### Add New Leave Type Modal User Manual This section explains how to define a new leave type. This modal appears when you click "+ Add New Leave Type" or "Edit" an existing leave type. It is divided into three sub-tabs: **General**, **Entitlement**, and **Applicability**. #### General Tab This tab covers the basic details of the leave type. **1. Leave Type**\* - **Purpose:** The name of the leave category (e.g., "Sick Leave", "Annual Leave", "Maternity Leave"). - **Example:** `E.g. Sick, Casual` - **How to Fill:** Type the desired name for the leave type. **2. Leave Allotment Type** - **Purpose:** How the leaves are granted or renewed. - **Options (Example):** `Monthly Leave Type` (other options like "Yearly" are typically available). - **How to Select:** Click the dropdown and choose the allotment frequency. **3. No of Monthly Leaves**\* - **Purpose:** The number of leaves allotted per period (e.g., if "Monthly Leave Type" is selected, this is the number of leaves per month). - **Current Setting (Example):** `0` - **How to Fill:** Enter the number of leaves. **4. Leave Paid Status** - **Purpose:** To specify whether this leave type is paid or unpaid. - **Current Setting (Example):** `Paid` - **How to Select:** Click the dropdown and choose "Paid" or "Unpaid". **5. Color Code**\* - **Purpose:** To assign a visual color to the leave type, which can help in schedules or reports. - **Current Setting (Example):** `#16B13D` (green hex code) and a green color swatch. - **How to Change:** Type a hex code or use the color picker. #### Entitlement Tab This tab defines the rules for when employees are eligible for this leave type. **1. Effective After**\* - **Purpose:** The number of days an employee must work after joining before becoming eligible for this leave type. - **How to Fill:** Enter the number of days. - **Context:** `Day(s) of Joining` **2. Unused Leaves** - **Purpose:** How unused leaves of this type are handled at the end of the allotment period. - **Options (Example):** `Carry Forward` (other options like "Lapse" might be available). - **How to Select:** Click the dropdown and choose the desired action for unused leaves. **3. Over Utilization** - **Purpose:** How to handle situations where an employee requests more leave than their entitlement. - **Options (Example):** `Do not allow` (other options like "Allow" or "Allow with manager approval" might be available). - **How to Select:** Click the dropdown and choose the desired policy for over-utilization. **4. Allowed in probation?** - **Purpose:** If checked, employees are allowed to take this leave type during their probation period. - **How to Use:** Check or uncheck the box. **5. Allowed in notice period?** - **Purpose:** If checked, employees are allowed to take this leave type during their notice period (e.g., before leaving the company). - **How to Use:** Check or uncheck the box. #### Applicability Tab This tab determines which groups of employees are eligible for this leave type based on various criteria. **1. Gender** - **Purpose:** To restrict the leave type to specific genders. - **Options (Example):** `Male, Female, Others` (all selected) - **How to Select:** Click the dropdown and select the gender(s) to which this leave type applies. **2. Marital Status** - **Purpose:** To restrict the leave type based on marital status. - **Options (Example):** `Single, Married, Widower, Separate, Divorced` (all selected) - **How to Select:** Click the dropdown and select the marital status/statuses to which this leave type applies. **3. Department** - **Purpose:** To restrict the leave type to specific departments. - **Options (Example):** `Nothing selected` - **How to Select:** Click the dropdown and select the department(s) to which this leave type applies. **4. Designation** - **Purpose:** To restrict the leave type to specific job designations. - **Options (Example):** `Nothing selected` - **How to Select:** Click the dropdown and select the designation(s) to which this leave type applies. **5. User Role** - **Purpose:** To restrict the leave type based on user roles within the system. - **Options (Example):** `App Administrator, Employee` (all selected) - **How to Select:** Click the dropdown and select the user role(s) to which this leave type applies. ### Actions within the "Add New Leave Type" Modal - **Cancel:** Click the "Cancel" button to close the modal window without saving any new leave type information. - **Save:** Click the green "Save" button to save the new or updated leave type to your system. Ensure all mandatory fields (marked with an asterisk) across all tabs are filled correctly. # Leaves General Settings ### Overview of Leaves General Settings Tab This tab contains options for leave counting methods and the leave approval workflow. **1. Leave Counting Method** - **Purpose:** To define how an employee's leave entitlement is calculated. - **Options:** - **Count leaves from the date of joining:** If selected, an employee's leave count will be based on their individual joining date. - **Count leaves from the start of the year:** If selected, leave counts for all employees will reset at the beginning of the calendar year (January 1st). - **How to Select:** Click the radio button next to your preferred counting method. **2. Reporting Manager can... the Leave** - **Purpose:** To define the level of authority a reporting manager has in approving leaves. - **Important Note:** Below the radio buttons, there's a note: *"Note: Approve means direct approval, Pre-Approval means another approval by admin/hr is required."* - **Options (Dropdown):** - **Pre-Approve:** If selected, the reporting manager can pre-approve a leave, but final approval from an HR or Admin user is still required. - (Other options like "Approve" might be available in the dropdown, allowing direct approval by the reporting manager). - **How to Select:** Click the dropdown menu and choose the appropriate approval level for reporting managers. ### Saving Your Changes 1. After making any modifications to the general leave settings, the changes are usually saved automatically or by clicking a "Save" button (not explicitly visible but often implied in such sections). A green "Updated successfully!" notification typically confirms the save. # Archived Leaves Type Tab ### Overview of Archived Leaves Type Tab This tab displays a list of all leave types that have been archived. **Archived Leave Types List:** This section lists any leave types that have been moved to the archive. - **Leave Type:** This column would display the name of the archived leave type. - **Leave Allotment Type:** This column would show how the leaves were allotted (e.g., "Yearly", "Monthly"). - **No of Leaves:** This column would indicate the number of leaves allotted for that type. - **Monthly Limit:** This column would display any monthly limit that was set for the leave type. - **Leave Paid Status:** This column would indicate whether the archived leave was paid or unpaid. - **Department:** This column would show which department this leave type was applicable to. - **Designation:** This column would show which designation this leave type was applicable to. - **Action:** This column would typically contain options to manage each individual archived leave type, such as: - **Restore:** An option to move the leave type back to the active "Leaves Type Settings" list. - **Delete Permanently:** An option to permanently remove the archived leave type from the system. - **Current Status:** "No leave type added." indicates that there are currently no archived leave types. # Custom Fields ### Overview of Custom Fields Page This page displays the modules for which custom fields have been defined and provides an option to add new custom fields. **1. Add Field Button** - **Purpose:** To create a new custom field. - **How to Use:** Click the green "+ Add Field" button to open the "Add Field" modal window. **2. Custom Fields List (by Module)** This section lists the modules that currently have custom fields configured. - **Module Name (Example):** `Product` - **Number of Fields (Example):** `1 Field` (indicating how many custom fields are defined for that module). - **View Fields Button:** Click this button to see a list of the custom fields specifically configured for that module. This would likely take you to another view or open a modal displaying the fields. --- ### Add Field Modal User Manual This section explains how to use the "Add Field" modal window, which appears when you click "+ Add Field". This modal allows you to define the properties of a new custom field. ### Overview of "Add Field" Fields Fields marked with a red asterisk (\*) are mandatory. **1. Module**\* - **Purpose:** To select the specific module (e.g., Client, Project, Product, Employee) where this custom field will appear and be used. - **Current Selection (Example):** `Client` - **How to Select:** Click the dropdown menu and choose the relevant module. **2. Field Label**\* - **Purpose:** The user-friendly name or title of the custom field that will be displayed to users (e.g., "Client Type", "Project Budget", "Product SKU"). - **How to Fill:** Type the desired label for your custom field into this text field. **3. Is required** - **Purpose:** To specify whether this custom field must be filled out when data is entered for the selected module. - **Options:** - **Yes:** Select this radio button to make the field mandatory. - **No:** Select this radio button to make the field optional. **4. Field Type** - **Purpose:** To define the type of data that the custom field will store (e.g., text, number, date, dropdown, checkbox). - **Current Selection (Example):** `Text` - **How to Select:** Click the dropdown menu and choose the appropriate data type for your field. (Selecting different types may reveal additional configuration options, such as choices for a dropdown list.) **5. Show in table view** - **Purpose:** If checked, this custom field's data will be visible as a column in the table views or listings of the selected module. - **How to Use:** Check or uncheck the box. **6. Allow export in table view** - **Purpose:** If checked, the data from this custom field will be included when exporting data from the table view of the selected module. - **How to Use:** Check or uncheck the box. ### Actions within the Modal - **Cancel:** Click the "Cancel" button to close the modal window without saving the new custom field. - **Save:** Click the green "Save" button to create the new custom field with the specified properties. If mandatory fields are left blank, you will receive an error message. - **Close (X icon):** Click the 'x' icon in the top right corner of the modal window to close it without saving, similar to the "Cancel" button. # Roles & Permissions ### Overview of Roles & Permissions Page This page displays a list of predefined and custom user roles, along with options to manage them and their permissions. **1. Manage Role Button** - **Purpose:** To add new custom roles or manage existing ones. - **How to Use:** Click the "Manage Role" button to open the "Manage Role" modal window. **2. Roles & Permissions List** This section lists all the user roles available in your system. - **Role Name (Examples):** - **App Administrator:** The highest level of access. Permissions for this role cannot be changed. - **Employee:** A standard user role for employees. - **Client:** A user role for clients. - **Members Count (Example):** "1 Member", "0 Member" - indicates how many users are currently assigned to that role. - **Permissions Button:** - **Purpose:** To view and configure the detailed permissions for a specific role. - **How to Use:** Click the "Permissions" button next to a role to expand its permission settings (as shown in subsequent screenshots for "Employee" and "Client" roles). - **Note:** "Admin permissions can not be changed." means the "Permissions" button will not be active for the "App Administrator" role. --- ### Manage Role Modal User Manual This section explains how to add new custom roles or manage basic aspects of existing roles. This modal appears when you click the "Manage Role" button. ### Overview of "Manage Role" Fields **Existing User Roles Section:** - **\#:** Serial number of the role. - **User Role:** The name of the user role (e.g., "App Administrator", "Employee", "Client"). - **Action:** - **Unsynced Users:** This link likely displays users who are assigned to this role but might have custom permissions overriding the default role permissions (not explicitly shown as editable here). - **Default role can not be deleted:** Indicates that default system roles cannot be removed. - **Reset Permissions:** This button allows you to revert any custom permission changes made to a specific role back to its default settings. **Add New Role Section:** **1. Role Name**\* - **Purpose:** The name for a new custom user role you wish to create (e.g., "Team Lead", "HR Manager", "Sales Representative"). This is a mandatory field. - **Example:** `e.g. HR` - **How to Fill:** Type the desired name for the new role. **2. Import from Role** - **Purpose:** To copy permissions from an existing role as a starting point for your new custom role. This saves time by pre-filling permissions that you can then modify. - **How to Select:** Click the dropdown and choose an existing role to import permissions from. ### Actions within the "Manage Role" Modal - **Save:** Click the green "Save" button to create the new role or apply changes made within this modal. - **Close:** Click the "Close" button to close the modal window without saving. - **Close (X icon):** Click the 'x' icon in the top right corner to close. --- ### Role Permissions Configuration User Manual (for Employee/Client Roles) This section explains how to configure the detailed permissions for specific roles (like Employee or Client), which become visible after clicking the "Permissions" button next to a role. ### Overview of Permission Settings Permissions are managed module by module, with granular control over "Add", "View", "Update", and "Delete" actions. There's also a "More" option for additional module-specific permissions. **Permission Columns:** - **Module:** The name of the application module (e.g., Clients, Employees, Projects, Invoices, Time Logs, Tickets). - **Add:** Controls the permission to create new records within that module. - **View:** Controls the permission to view records within that module. - **Update:** Controls the permission to modify existing records within that module. - **Delete:** Controls the permission to remove records within that module. - **More:** Contains additional, often module-specific, permissions not covered by the standard Add/View/Update/Delete. Clicking "More" would likely reveal a dropdown or sub-menu with more granular options. **Common Permission Options (within dropdowns for Add/View/Update/Delete):** - **None:** No permission for this action. - **Added:** Can only perform the action on records they personally created. - **Owned:** Can only perform the action on records where they are marked as the owner or assignee. - **All:** Can perform the action on all records within the module. - **Added & Owned:** Can perform the action on records they created OR records they own. **Examples of Permissions (from screenshots):** - **Clients:** `None` for Add, View, Update, Delete. This means the role cannot interact with client records. - **Employees:** `None` for Add, View, Update, Delete. - **Projects:** `None` for Add, `Owned` for View, `None` for Update, Delete. This means they can only see projects they own. - **Attendance:** `None` for Add, `Owned` for View, `None` for Update, Delete. - **Tasks:** `Added` for Add, `Added & Own` for View, Update, Delete. - **Time Logs:** `Added` for Add, `Added & Own` for View, Update, Delete. - **Tickets:** `Added` for Add, `Added & Own` for View, Update, Delete. - **Events:** `None` for Add, `Owned` for View, Update, Delete. - **Notices:** `None` for Add, `Owned` for View, Update, Delete. - **Leaves:** `Added` for Add, `Added & Own` for View, Update, Delete. - **Leads:** `Added` for Add, `All` for View, `Added` for Update, Delete. - **Holidays:** `None` for Add, `Owned` for View, Update, Delete. - **Products:** `None` for Add, View, Update, Delete. - **Expenses:** `Added` for Add, `Added & Own` for View, Update, Delete. - **Contracts:** `None` for Add, View, Update, Delete. - **Reports:** `--` (dashes) - likely means read-only access or permissions are managed differently. - **Dashboards:** `--` (dashes) - likely means read-only access or permissions are managed differently. ### Saving Permissions - After selecting your desired permissions for a role, there is usually a "Save" button at the bottom of the expanded permissions section (not visible in the provided cropped screenshots). Make sure to click it to apply your changes. # Message Settings ### Overview of Message Settings Page This page provides options to control chat permissions and sound notifications for messages. **Chat Permissions (Checkboxes):** These checkboxes control who can chat with whom in the system. **1. Allow chat between client and employee?** - **Purpose:** If checked, clients and employees will be able to send messages to each other directly within the application. - **How to Use:** Check or uncheck the box to enable or disable client-employee chat. **2. Allow chat between client and admin?** - **Purpose:** If checked, clients and administrators will be able to send messages to each other directly within the application. - **How to Use:** Check or uncheck the box to enable or disable client-admin chat. **Sound Notification Alert:** **1. Send Sound Notification Alert?** - **Purpose:** To enable or disable sound alerts for new messages or notifications. - **Current Setting (Example):** `No` - **How to Select:** Click the dropdown menu and choose "Yes" to enable sound alerts or "No" to disable them. The question mark icon next to it suggests there might be more information or context about this setting. ### Saving Your Changes 1. After making any modifications to the message settings, click the green "Save" button. 2. Your changes will be saved and applied. # Lead Setting # Lead Source ### Overview of Lead Source Tab This tab displays a list of all configured lead sources and provides options to add new ones, as well as edit or delete existing lead sources. **1. Add New Lead Source Button** - **Purpose:** To create a new lead source. - **How to Use:** Click the green "+ Add New Lead Source" button to open the "Add Lead Source" modal window. **2. Lead Source List** This section lists all the lead sources currently defined in your system. - **\#:** Displays the serial number for each lead source. - **Name:** Displays the name of the lead source (e.g., "Email", "Google", "Facebook", "Friend", "Direct", "Tv"). - **Action:** This column contains options to manage each individual lead source: - **Edit:** Click the "Edit" button to open the "Add Lead Source" modal, pre-filled with the selected lead source's details, allowing you to modify it. - **Delete:** Click the "Delete" button to remove a lead source from the list. This usually prompts for confirmation before deletion. --- ### Add Lead Source Modal User Manual This section explains how to use the "Add Lead Source" modal window, which appears when you click "+ Add New Lead Source" or "Edit" an existing lead source. ### Overview of "Add Lead Source" Fields The modal contains one mandatory field for defining the new lead source. Fields marked with a red asterisk (\*) are mandatory. **1. Lead Source**\* - **Purpose:** The name of the source from which a lead originates (e.g., "Website", "Referral", "Cold Call", "Social Media Campaign"). - **How to Fill:** Type the desired name for the new lead source into this text field. ### Actions within the Modal - **Close (X icon):** Click the 'x' icon in the top right corner of the modal window to close it without saving. - **Close:** Click the "Close" button to close the modal window without adding a new lead source. - **Save:** Click the green "Save" button to add the new lead source to your system. If the mandatory "Lead Source" field is left blank, you will receive an error message prompting you to complete it. # Pipeline ### Overview of Pipeline Tab This tab allows you to view existing pipelines, add new ones, and define or manage the "Deal Stages" within each pipeline. **Top Action Buttons:** **1. Add New Pipeline Button** - **Purpose:** To create a new sales pipeline (e.g., "New Client Pipeline", "Product X Sales Funnel"). - **How to Use:** Click the green "+ Add New Pipeline" button to open the "Add New Pipeline" modal window. **2. Add New Deal Stage Button** - **Purpose:** To create a new stage within a selected pipeline (e.g., "Initial Contact", "Proposal Sent"). - **How to Use:** Click the green "+ Add New Deal Stage" button to open the "Add New Deal Stage" modal window. **Pipeline List:** This section displays a list of your sales pipelines. - **Pipeline Name (Example):** `Sales Pipeline` (with a blue icon next to it, possibly indicating an active or default pipeline). - **Number of Deal Stages (Example):** `7 Deal Stages` (indicating how many stages are defined within this pipeline). - **Default Status:** A green "Default" icon indicates which pipeline is set as the default for new deals/leads. - **Deal Stages Button:** - **Purpose:** To view and manage the individual stages within that specific pipeline. - **How to Use:** Click the "Deal Stages" button. This action expands the view to show the list of deal stages for the selected pipeline, along with options to edit or delete them. **Deal Stages List (Expanded View):** When you click the "Deal Stages" button for a pipeline, the following list appears: - **\#:** Displays the serial number for each deal stage. - **Deal Stage:** Displays the name of the deal stage (e.g., "Generated", "Qualified", "Initial Contact"). Each stage also has a colored dot next to it, indicating its associated `Label Color`. - **Default Deal Stage:** A radio button column. One stage can be set as the `Default` stage for newly created deals within this pipeline. - **Green "Default" icon:** Indicates the currently selected default deal stage. - **Radio button:** Click to set a different stage as the default. - **Action:** This column contains options to manage each individual deal stage: - **Edit:** Click the "Edit" button to open the "Add New Deal Stage" modal, pre-filled with the selected stage's details, allowing you to modify it. - **Delete:** Click the "Delete" button to remove a deal stage from the list. This usually prompts for confirmation before deletion. --- ### Add New Pipeline Modal User Manual This section explains how to define a new sales pipeline. This modal appears when you click "+ Add New Pipeline". ### Overview of "Add New Pipeline" Fields Fields marked with a red asterisk (\*) are mandatory. **1. Name**\* - **Purpose:** The name of the new sales pipeline (e.g., "SMB Sales", "Enterprise Deals", "Renewal Pipeline"). - **Example:** `e.g. In Progress` - **How to Fill:** Type the desired name for your new pipeline. **2. Label Color**\* - **Purpose:** To assign a visual color to the pipeline, which can help in distinguishing pipelines in reports or dashboards. - **Current Setting (Example):** `#16B13D` (green hex code) and a green color swatch. - **How to Change:** You can directly type a hex color code, or click the colored swatch to open a color picker and select a color visually. ### Actions within the "Add New Pipeline" Modal - **Save:** Click the green "Save" button to create the new pipeline. - **Close:** Click the "Close" button to close the modal without saving. - **Close (X icon):** Click the 'x' icon in the top right to close. --- ### Add New Deal Stage Modal User Manual This section explains how to define a new stage within a sales pipeline. This modal appears when you click "+ Add New Deal Stage" or "Edit" an existing deal stage. ### Overview of "Add New Deal Stage" Fields Fields marked with a red asterisk (\*) are mandatory. **1. Pipeline**\* - **Purpose:** To select the specific sales pipeline to which this new deal stage will belong. - **Current Selection (Example):** `Nothing selected` - **How to Select:** Click the dropdown menu and choose the pipeline where you want to add or edit this stage. **2. Deal Stage**\* - **Purpose:** The name of the specific stage within the pipeline (e.g., "Discovery", "Qualification", "Negotiation", "Closed Won", "Closed Lost"). - **Example:** `e.g. In Progress` - **How to Fill:** Type the desired name for the deal stage. **3. Label Color**\* - **Purpose:** To assign a visual color to the deal stage, which can help in quickly identifying the status of deals on a pipeline board. - **Current Setting (Example):** `#16B13D` (green hex code) and a green color swatch. - **How to Change:** You can directly type a hex color code, or click the colored swatch to open a color picker and select a color visually. ### Actions within the "Add New Deal Stage" Modal - **Save:** Click the green "Save" button to create the new deal stage or update the existing one. - **Close:** Click the "Close" button to close the modal without saving. - **Close (X icon):** Click the 'x' icon in the top right to close. # Deal Agent ### Overview of Deal Agent Tab This tab displays a list of users designated as deal agents and provides options to add new ones, along with their assigned categories and status. **1. Add New Deal Agent Button** - **Purpose:** To designate a new user as a deal agent. - **How to Use:** Click the green "+ Add New Deal Agent" button to open the "Add New Deal Agent" modal window. **2. Deal Agent List** This section lists all the users currently configured as deal agents in your system. - **\#:** Displays the serial number for each deal agent. - **Name:** Displays the name of the user who is a deal agent. - **Category:** Shows the deal category(ies) assigned to the agent. - **Status:** The current status of the deal agent (e.g., Active). - **Action:** This column would typically contain options to manage each individual deal agent, such as: - **Edit:** An "Edit" button or icon to modify an existing agent's settings. - **Delete:** A "Delete" button or icon to remove an agent from the list. This would usually trigger a confirmation prompt. - **Current Status:** "No lead agent added." indicates that no deal agents have been designated yet. --- ### Add New Deal Agent Modal User Manual This section explains how to use the "Add New Deal Agent" modal window, which appears when you click "+ Add New Deal Agent". ### Overview of "Add New Deal Agent" Fields The modal contains two mandatory fields for assigning a user as a deal agent and associating them with deal categories. Fields marked with a red asterisk (\*) are mandatory. **1. Choose Agents**\* - **Purpose:** To select an existing user from your system who will be designated as a deal agent. - **Current Selection (Example):** `Adam Harith` (with "It's you" indicating this user is currently logged in). - **How to Select:** Click the dropdown menu and select the user you wish to assign as a deal agent. **2. Deal Category**\* - **Purpose:** To assign the selected deal agent to one or more specific deal categories. This helps in routing leads or deals to the appropriate agent. - **Current Selection (Example):** `Nothing selected` - **How to Select:** Click the dropdown menu and select the deal category(ies) you want to associate with this agent. ### Actions within the Modal - **Cancel:** Click the "Cancel" button to close the modal window without saving the new deal agent. - **Save:** Click the green "Save" button to add the selected user as a deal agent. If mandatory fields are left blank, you will receive an error message prompting you to complete them. - **Close (X icon):** Click the 'x' icon in the top right corner of the modal window to close it without saving, similar to the "Cancel" button. # Deal Category ### Overview of Deal Category Tab This tab displays a list of all configured deal categories and provides options to add new ones, as well as edit or delete existing categories. **1. Add New Deal Category Button** - **Purpose:** To create a new category for your deals. - **How to Use:** Click the green "+ Add New Deal Category" button to open the "Add New Deal Category" modal window. **2. Deal Category List** This section lists all the deal categories currently defined in your system. - **\#:** Displays the serial number for each deal category. - **Category Name:** Displays the name of the deal category. - **Action:** This column would typically contain options to manage each individual deal category, such as: - **Edit:** An "Edit" button or icon to modify an existing category's name. - **Delete:** A "Delete" button or icon to remove a category from the list. This would usually trigger a confirmation prompt. - **Current Status:** "No record found." indicates that no deal categories have been added yet. --- ### Add New Deal Category Modal User Manual This section explains how to use the "Add New Deal Category" modal window, which appears when you click "+ Add New Deal Category". ### Overview of "Add New Deal Category" Fields The modal contains one mandatory field for defining the new deal category. Fields marked with a red asterisk (\*) are mandatory. **1. Category Name**\* - **Purpose:** The name of the new category you want to create for your deals (e.g., "Software", "Hardware", "Service Contract", "Renewal"). - **How to Fill:** Type the desired name for the new deal category into this text field. ### Actions within the Modal - **Close (X icon):** Click the 'x' icon in the top right corner of the modal window to close it without saving. - **Close:** Click the "Close" button to close the modal window without adding a new deal category. - **Save:** Click the green "Save" button to add the new deal category to your system. If the mandatory "Category Name" field is left blank, you will receive an error message prompting you to complete it. # Round Robin ### Overview of Round Robin Tab This tab allows you to enable or disable the Round Robin lead assignment method and provides informative details on its functionality. **1. Round Robin Toggle** - **Purpose:** To enable or disable the Round Robin feature for automatic lead assignment. - **How to Use:** Click the toggle switch. - **Enabled (Green/Right position):** Round Robin lead assignment is active. - **Disabled (Gray/Left position):** Round Robin lead assignment is inactive. **2. Information Section** This section provides a clear explanation of the Round-Robin Method: - **Round-Robin Method:** - **Equal Distribution:** "Tasks are evenly distributed among team members." - **Sequential Assignment:** "Each task is assigned to the next team member in order." - **Fair Rotation:** "Ensures balanced workloads and prevents overload." - **Example:** - "Leads go to Agent A, then B, then C, and repeat." - "In a customer support system, incoming leads are assigned in a round-robin fashion. The first lead goes to Agent A, the second to Agent B, the third to Agent C, and the fourth back to Agent A, continuing in this pattern." - **Benefit:** - "Using the round-robin method ensures fair and efficient task distribution, promotes balanced workloads, and streamlines resource allocation." **Important Note:** While a "Save" button is not explicitly visible in this specific screenshot (it's likely off-screen or the changes save automatically upon toggling), ensure your changes are saved for them to take effect. # Time Log Settings ### Overview of Time Log Settings Page This page provides various toggle switches to control the behavior of time tracking, including automatic actions, reminders, and approval workflows. **Time Log Configuration Options (Toggle Switches):** Each option has a toggle switch to enable or disable the feature. **1. Stop timer automatically after shift end time** - **Purpose:** If enabled, any active time trackers will automatically stop recording once an employee's scheduled shift ends. - **How to Use:** Click the toggle switch to enable (green/right) or disable (gray/left) this automatic function. **2. Time log will require approval** - **Purpose:** If enabled, submitted time logs will require approval from a manager or administrator before they are finalized. - **How to Use:** Click the toggle switch to enable (green/right) or disable (gray/left) the approval requirement for time logs. **3. Send time tracker reminders** - **Purpose:** If enabled, the system will send reminders related to time tracking (e.g., to start/stop timers, or for overdue time entries). - **How to Use:** Click the toggle switch to enable (green/right) or disable (gray/left) time tracker reminders. **4. Send Daily Timelog Report** - **Purpose:** If enabled, a daily summary report of time logs will be sent out. - **How to Use:** Click the toggle switch to enable (green/right) or disable (gray/left) the daily time log report. ### Saving Your Changes 1. After making any modifications to the time log settings, click the green "Save" button. 2. Your changes will be saved and applied. # Task Settings ### Overview of Task Settings Page This page provides detailed options for customizing task reminders and controlling the visibility of task information for clients. **Send Reminder Section:** This section allows you to configure when task reminders are sent. **1. Send task reminder before X days of due date** - **Purpose:** To send a reminder a specified number of days *before* a task's due date. - **Current Setting (Example):** `0` - **How to Fill:** Enter the number of days you want the reminder to be sent before the due date. **2. Send task reminder on the day of due date** - **Purpose:** To send a reminder on the exact day a task is due. - **Current Setting (Example):** `Yes` (radio button selected) - **How to Select:** Choose "Yes" to enable reminders on the due date or "No" to disable them. **3. Send task reminder after X days of due date** - **Purpose:** To send a reminder a specified number of days *after* a task's due date, typically for overdue tasks. - **Current Setting (Example):** `0` - **How to Fill:** Enter the number of days you want the reminder to be sent after the due date. **4. Status** - **Purpose:** This dropdown likely controls the status of tasks for which reminders are sent (e.g., only send reminders for "Incomplete" tasks). - **Current Setting (Example):** `Incomplete` - **How to Select:** Click the dropdown and choose the task status(es) for which reminders should apply. **5. Taskboard Default Length** - **Purpose:** This likely sets the default number of tasks or items displayed per column/list on the taskboard view. - **Current Setting (Example):** `10` - **How to Fill:** Enter the desired default length for taskboards. **Sections visible to client Section:** This section allows you to control which specific task details clients can see when viewing tasks. Each item has a checkbox. - **Task category:** Check to show the task's category. - **Due Date:** Check to show the task's due date. - **Label:** Check to show any labels associated with the task. - **Priority:** Check to show the task's priority level. - **Comment:** Check to show comments on the task. - **Timesheet:** Check to show associated timesheet entries. - **Hours Logged:** Check to show the total hours logged on the task. - **Project:** Check to show the project the task belongs to. - **Assigned To:** Check to show who the task is assigned to. - **Assigned By:** Check to show who assigned the task. - **Make Private:** (This checkbox is unusual in "sections visible to client"; it might control a general setting for tasks being private, but its placement here suggests it might control if the *option to make a task private* is shown to clients, or if private tasks are hidden.) - **Add File:** Check to show options to add files to tasks. - **Notes:** Check to show task notes. - **Custom Fields:** Check to show any custom fields created for tasks. - **Start Date:** Check to show the task's start date. - **Description:** Check to show the task's full description. - **Status:** Check to show the current status of the task. - **Time estimate:** Check to show the estimated time for the task. - **Sub Task:** Check to show sub-tasks related to the main task. - **History:** Check to show the task's history or activity log. - **Copy Task Link:** Check to allow clients to copy the task's direct link. - **How to Use:** Check or uncheck the boxes next to each item to control its visibility for clients. ### Saving Your Changes 1. After making any modifications to the task settings, click the green "Save" button at the bottom of the page. 2. Your changes will be saved and applied. # Security Settings Overview of Security Settings Page This page focuses on enabling Two-Factor Authentication (2FA) for your account. **Two-Factor Authentication Section:** - **Information:** A message indicates the purpose of 2FA: "Increase your account's security by enabling Two-Factor Authentication (2FA)". - **Red Dot:** The red dot next to "Two-Factor Authentication" indicates that it is currently not fully configured or active. **Methods for Two-Factor Authentication:** You are provided with two options to set up 2FA: **1. Setup Using Email** - **Purpose:** This method sends a verification code to your registered email address during login. - **Information:** "Enabling this feature will send code on your email account example@gmail.com for log in." (Your specific email address will be displayed here). - **Enable Button:** - **Purpose:** To activate 2FA via email. - **How to Use:** Click the green "Enable" button. This will likely trigger a process to verify your email and activate the feature. **2. Setup Using Google Authenticator** - **Purpose:** This method uses the Google Authenticator app to generate time-based verification codes, even when your phone is offline. - **Information:** "Use the Authenticator app to get free verification codes, even when your phone is offline. Available for Android and iPhone." - **Enable Button:** - **Purpose:** To activate 2FA via Google Authenticator. - **How to Use:** Click the green "Enable" button. This will typically display a QR code that you need to scan with your Google Authenticator app, followed by a field to enter a verification code from the app to confirm the setup. ### Saving Your Changes - For both 2FA methods, clicking the "Enable" button will initiate the setup process. Once successfully completed, the feature will be activated. There might not be a separate "Save" button on this page, as enabling a feature directly applies the change. # Theme Settings This manual explains how to customize the visual appearance and branding of your application. This includes setting the app name, branding style, logos for different themes, and the favicon. ### Accessing Theme Settings 1. From the left sidebar, click on "Theme Settings". ### Overview of Theme Settings Page This page allows you to personalize various visual elements of your application's interface. **1. App Name**\* - **Purpose:** The main name of your application that appears in the title bar or header. This is a mandatory field. - **Current Setting (Example):** `Adam Test` - **How to Fill:** Type the desired name for your application. **2. Select Branding Style** - **Purpose:** To choose between different visual styles for your application's navigation or header, typically focusing on whether the company name or logo is more prominent. - **Current Selection (Example):** The "Company Name" style is selected (highlighted with a blue border). - **Company Name Style:** Shows your company name prominently in the navigation area (e.g., "Company Name" with "Prof. Nels Gutmann" and "Dashboard" below it). It also shows a star icon next to the company name, perhaps indicating a preferred or default style. - **Company Logo Style:** Shows your company logo prominently in the navigation area (e.g., "Company Logo" with "Dashboard" below it). - **How to Select:** Click on the desired branding style thumbnail. **3. Light Mode Logo** - **Purpose:** To upload a logo that will be displayed when the application is viewed in a light theme or mode. - **How to Upload/Change:** Click "Choose a file" or drag and drop an image file into the box to upload your logo for the light mode. A preview of the currently uploaded logo is displayed. **4. Dark Mode Logo** - **Purpose:** To upload a logo that will be displayed when the application is viewed in a dark theme or mode. This allows for optimal visibility of your logo against different backgrounds. - **How to Upload/Change:** Click "Choose a file" or drag and drop an image file into the box to upload your logo for the dark mode. A preview of the currently uploaded logo is displayed. **5. Favicon Image** - **Purpose:** To upload a favicon, which is the small icon that appears in the browser tab next to your site's title. - **How to Upload/Change:** Click "Choose a file" or drag and drop an image file into the box to upload your favicon. A preview of the currently uploaded favicon is displayed. ### Saving Your Changes **1. Save Button** - **Purpose:** To apply all the modifications you've made to the theme settings. - **How to Use:** Click the green "Save" button. **2. Use Default Theme Button** - **Purpose:** To revert all theme settings back to the application's original default appearance. - **How to Use:** Click the "Use Default Theme" button. This would likely require a confirmation before resetting. # Module Settings ## Module Settings - Admin Tab User Manual This manual explains how to configure the visibility and activation of various modules within the application for users. This allows you to enable or disable access to specific features for administrators. ### Accessing Module Settings 1. From the left sidebar, click on "Module Settings". 2. On the "Module Settings" page, ensure the "Admin" tab is selected (it's the default when you first access module settings). ### Overview of Module Settings Tab This tab presents a series of toggle switches, each corresponding to a different module or feature within the application. The settings on this tab apply specifically to users who have the "specific" role. **Module Visibility Toggles:** Each module listed has a toggle switch: - **Projects:** Controls visibility of the Projects module. - **Events:** Controls visibility of the Events module. - **Contracts:** Controls visibility of the Contracts module. - **Knowledge Base:** Controls visibility of the Knowledge Base module. - **Expenses:** Controls visibility of the Expenses module. - **Products:** Controls visibility of the Products module. - **Tickets:** Controls visibility of the Tickets module. - **Messages:** Controls visibility of the Messages module. - **Notices:** Controls visibility of the Notices module. - **Clients:** Controls visibility of the Clients module. - **Leaves:** Controls visibility of the Leaves module. - **Reports:** Controls visibility of the Reports module. - **Bank Account:** Controls visibility of the Bank Account module (likely part of Finance). - **Invoices:** Controls visibility of the Invoices module. - **Tasks:** Controls visibility of the Tasks module. - **Payments:** Controls visibility of the Payments module. - **Employees:** Controls visibility of the Employees module. - **Leads:** Controls visibility of the Leads module. - **Estimates:** Controls visibility of the Estimates module. - **Time Logs:** Controls visibility of the Time Logs module. - **Orders:** Controls visibility of the Orders module. - **Attendance:** Controls visibility of the Attendance module. - **Holidays:** Controls visibility of the Holidays module. - **How to Use:** - **Enabled (Green/Right position):** The module is visible and accessible to users. - **Disabled (Gray/Left position):** The module is hidden and not accessible to users. - Click the toggle switch next to each module name to enable or disable its visibility for administrators. ### Saving Your Changes - After making any modifications to the module settings, there will typically be a "Save" button on the page (not visible in this screenshot, but usually present at the bottom of such settings pages). Ensure you click this button to apply your changes. # Google Calendar Settings ## Google Calendar Settings User Manual This manual explains how to configure the integration with Google Calendar and choose which types of events from the application should be synchronized. ### Accessing Google Calendar Settings 1. From the left sidebar, click on "Google Calendar Settings". ### Overview of Google Calendar Settings Page This page provides options to enable the Google Calendar integration and select which types of notifications or events are pushed to your Google Calendar. **1. Status** - **Purpose:** This checkbox controls whether the Google Calendar integration is generally active or inactive. - **How to Use:** Check the box to enable the integration. When checked, you would typically see additional fields (e.g., "Connect to Google Calendar" button, API credentials, or selection of specific Google Calendars) appear to establish the connection between this application and your Google Calendar account. These fields are not visible in the provided screenshot but are essential for a functional setup. - **Uncheck the box:** To disable the Google Calendar integration. **2. Notification Settings** This section lists various types of events or data from the application that can be synchronized with Google Calendar. - **Purpose:** To select which specific modules' data (e.g., Leads, Tasks) should be pushed to your Google Calendar. - **Individual Notification Checkboxes:** Each item (e.g., "Leads", "Leaves", "Invoices", "Contracts", "Tasks", "Events", "Holiday") has a checkbox next to it. - **Checked Box:** Means data from that module **will** be synchronized or trigger an event in your Google Calendar (provided the main "Status" is enabled and the connection is set up). - **Unchecked Box:** Means data from that module **will not** be synchronized to your Google Calendar. - **How to Use:** Simply check or uncheck the boxes next to each module type to customize what gets synced to your Google Calendar. ### Saving Your Changes 1. After making any modifications to the status or selecting the notification settings, click the green "Save" button at the bottom of the page. 2. Your changes will be saved and applied to the Google Calendar integration. # Custom Link Settings ## Custom Link Settings User Manual This manual explains how to manage and create custom links within your application. These custom links can provide quick access to external websites or specific internal pages for designated user roles. ### Accessing Custom Link Settings 1. From the left sidebar, click on "Custom Link Settings". ### Overview of Custom Link Settings Page This page displays a list of all configured custom links and provides options to add new ones, as well as edit or delete existing links. **1. Add New Custom Link Button** - **Purpose:** To create a new custom link. - **How to Use:** Click the green "+ Add New Custom Link" button to open the "Add New Custom Link" modal window. **2. Custom Link List** This section lists all the custom links currently defined in your system. - **Link Title:** Displays the title of the custom link as it will appear in the application. - **URL:** Displays the web address that the custom link points to. - **Can Be Viewed By:** Shows which user roles (e.g., Admin, Employee, Client) are able to see and access this link. - **Status:** Indicates whether the custom link is currently Active or Inactive. - **Action:** This column would typically contain options to manage each individual custom link, such as: - **Edit:** An "Edit" button or icon to modify an existing link's settings. - **Delete:** A "Delete" button or icon to remove a link from the list. This would usually trigger a confirmation prompt. - **Current Status:** "No record found." indicates that no custom links have been added yet. --- ### Add New Custom Link Modal User Manual This section explains how to use the "Add New Custom Link" modal window, which appears when you click "+ Add New Custom Link" or "Edit" an existing custom link. ### Overview of "Add New Custom Link" Fields Fields marked with a red asterisk (\*) are mandatory. **1. Link Title**\* - **Purpose:** The display name for your custom link. This is what users will see. - **Example:** `Link Title` (This is a placeholder, you would enter something descriptive like "Company Website" or "Support Portal"). - **How to Fill:** Type a clear and descriptive title for the custom link into this text field. **2. URL**\* - **Purpose:** The complete web address (URL) that the custom link will navigate to when clicked. - **Example:** `URL` (This is a placeholder, you would enter a full URL like `https://www.example.com` or `https://app.yourcompany.com/report`). - **How to Fill:** Type the full URL, including `http://` or `https://`, into this text field. **3. Can Be Viewed By**\* - **Purpose:** To control which user roles can see and access this custom link. - **Current Selection (Example):** `Nothing selected` - **How to Select:** Click the dropdown menu and select one or more user roles (e.g., "App Administrator", "Employee", "Client") that should have access to this link. **4. Status** - **Purpose:** To activate or deactivate the custom link without deleting it. - **Current Selection (Example):** `Active` - **How to Select:** Click the dropdown menu and choose "Active" to make the link visible and clickable, or "Inactive" to hide it. ### Actions within the Modal - **Cancel:** Click the "Cancel" button to close the modal window without saving the new custom link. - **Save:** Click the green "Save" button to create the new custom link with the specified properties. If mandatory fields are left blank, you will receive an error message prompting you to complete them. - **Close (X icon):** Click the 'x' icon in the top right corner of the modal window to close it without saving, similar to the "Cancel" button. # Billing # Plan Details
## Billing - Plan Details Tab User Manual This manual explains how to view your current subscription plan details within the application's billing section. ### Accessing Billing Settings
1. From the left sidebar, click on "Billing". 2. On the "Billing" page, ensure the "Plan Details" tab is selected (it's the default).
### Overview of Plan Details Tab This tab provides a summary of your current subscription, including the plan type, license expiration, and resource usage. **1. Plan Details Section** This section presents key information about your current plan:
- **Current Plan:** Displays the name of your active subscription plan. - **Current Setting (Example):** `Trial` - **License Expired On:** Shows the date when your current license or trial period will end. - **Current Setting (Example):** `10-08-2025 (1 month from now)` - *Note: This date is dynamic and will reflect your actual expiry.* - **Employees:** Indicates your current employee usage versus the limit allowed by your plan. - **Current Setting (Example):** `1 / 20` (meaning 1 employee used out of a limit of 20). - **Storage:** Shows your current storage usage versus the total storage allowed by your plan. - **Current Setting (Example):** `2.14 MB / 0 MB` (This example indicates you have used 2.14 MB but have 0 MB allotted, suggesting it might be a trial or misconfiguration, or an unlimited plan is represented as 0 MB).
**2. Upgrade Plan Button**
- **Purpose:** To navigate to a page where you can choose a different (usually higher-tier) subscription plan. - **How to Use:** Click the green "Upgrade Plan" button. This will redirect you to the plan selection or upgrade page of the application.
# Purchase History ## Billing - Purchase History Tab User Manual This manual explains how to view your past subscription purchases and related transaction details within the application's billing section. ### Accessing Purchase History 1. From the left sidebar, click on "Billing". 2. On the "Billing" page, click on the "Purchase History" tab. ### Overview of Purchase History Tab This tab displays a table listing all your previous subscription packages, payment dates, and transaction information. **Purchase History Table:** This table provides a record of your past transactions: - **Package:** The name of the subscription plan or package purchased (e.g., "Trial"). - **Payment Date:** The date when the payment for the package was made (e.g., "11-06-2025"). - **Next Payment Date:** The date when the next payment for a recurring subscription is due. For a trial, this might represent the end of the trial period (e.g., "10-08-2025"). - **Transaction Id:** A unique identifier for the payment transaction (e.g., "YAYN5KFRS1OXAMQA"). - **Amount:** The cost of the package. In the example, it's displayed as "-" which might indicate a free trial or no recorded amount for this specific entry. - **Payment Gateway:** The method or service used for the payment (e.g., if PayPal was used, it might show "PayPal"). - **Action:** This column provides options related to the transaction. - In the example, an "Download" icon is visible, which likely allows you to download a receipt or invoice for that specific purchase. **Table Navigation:** - **Show X entries:** A dropdown to select how many entries are displayed per page (e.g., "Show 100 entries"). - **Showing X to Y of Z entries:** Indicates the current range of entries being displayed out of the total number of entries. - **Previous / Next buttons:** Used to navigate through multiple pages of purchase history if there are more entries than displayed on a single page. # Offline Request ## Billing - Offline Request Tab User Manual This manual explains how to view and manage offline payment requests within the application's billing section. This tab would typically list requests made for payments outside of the standard online gateways. ### Accessing Offline Request History 1. From the left sidebar, click on "Billing". 2. On the "Billing" page, click on the "Offline Request" tab. ### Overview of Offline Request Tab This tab displays a table listing all offline payment requests that have been made or recorded in the system. **Offline Request Table:** This table provides a record of your offline payment requests: - **\#:** Displays the serial number for each request. - **Package:** The name of the subscription plan or package associated with the offline payment request. - **Payment By:** The entity (e.g., user, client) who made the payment or the request. The grey text "Filter available in table" suggests this column might have a filter option. - **Created:** The date when the offline payment request was created or recorded in the system. - **Status:** The current status of the offline payment request (e.g., Pending, Approved, Rejected). - **Action:** This column would typically contain options to manage each individual offline request, such as: - **View Details:** To see more information about the request. - **Approve/Reject:** Buttons for administrators to approve or reject the offline payment. - **Current Status:** "No data available in table" indicates that there are currently no offline payment requests recorded. **Table Navigation:** - **Show X entries:** A dropdown to select how many entries are displayed per page (e.g., "Show 100 entries"). - **Showing X to Y of Z entries:** Indicates the current range of entries being displayed out of the total number of entries. - **Previous / Next buttons:** Used to navigate through multiple pages of requests if there are more entries than displayed on a single page.