Daily Workflow

1. End of Day Commit: Push your developments to your assigned branch and inform the senior developer or the developer in charge by 5:30 PM every day.
2. Overtime Work: If you work overtime, push your changes either at the start of the next day or immediately after finishing your work, then inform the senior developer or the developer in charge.
3. Code Quality: Maintain a clean code flow with appropriate use of spaces and line breaks. Ensure that your code is readable and maintainable.

                               
       <table class="table">
           <thead>
               <tr>
                   <th>Header 1</th>
                   <th>Header 2</th>
               </tr>
           </thead>
           <tbody>
               <tr>
                   <td>Data 1</td>
                   <td>Data 2</td>
               </tr>
           </tbody>
       </table>
                               
                           

4. Use of Comments: Always use necessary comments for main developments. In the comments, describe below points:
   • The code description. (What the code does) Do not describe too much
   • If a modification happens (Due to the customer's or tech teams' request), you must mention which customer requested, which tech member involved in it and the date of the modification.
   • If you ever encountered a previously modified code to be modified again (If there is a comment) mention it to the tech member that it has been edited before by this customer.
     ** This type of modifications are not allowed unless it's been approved by the tech team leader. Please double verify about these changes. **
5. Variable Naming: Use meaningful variable names.
   • For models and controllers, use PascalCase.
   • For frontend operations, use snake_case.
   • For other PHP variables, you can use either camelCase or snake_case.

Design and Style Guidelines

Form Input Guidelines

Use the default form-control class for standard inputs. Use the col-md-4 OR col-md-3 to separate the fields. Label must be on top of the input field. Text field width must be same as the normal field

                    
                        <input type="text" class="form-control" placeholder="Default input">
                        
                    

Preview:

Font Sizes

Utilize Bootstrap utility classes for managing font sizes.

• Small Text: Use the small class for smaller text.

    <p class="small">Small text</p>
                    

Preview:

Small text

• Default Text: Use the default text size for standard content.

    <p>Default text</p>
                    

Preview:

Default text

• Large Text: Use the h1, h2, etc., tags for larger text sizes.

    <h1>Large text</h1>
                    

Preview:

Large text

Colors

Ensure cohesive design by following these color guidelines:

• Primary Color (Blue): Use Bootstrap's text-primary class.

    <p class="text-primary">Primary color text</p>
                    

Preview:

Primary color text

• Secondary Color (Orange): Use custom styles for orange shades.

    <p style="color: #FFA500;">Secondary color text</p>
                    

Preview:

Secondary color text

Button Styles

Buttons should follow these guidelines for color consistency:

• Submit Buttons: Use Bootstrap's btn-success class for green submit buttons.

    <button type="submit" class="btn btn-success">Submit</button>
                    

Preview:

Submit
• Delete/Remove Buttons: Use Bootstrap's btn-danger class for red delete/remove buttons.

    <button type="button" class="btn btn-danger">Delete</button>
    <button type="button" class="btn btn-danger">Remove</button>
                    

Preview:

Delete Remove
• Update Buttons: Use theme colors for update buttons; the recommended color is yellow.

    <button type="button" class="btn btn-warning">Update</button>
                    

Preview:

Update
• Print/View Buttons: Use Bootstrap's btn-primary class for blue print/view buttons.

    <button type="button" class="btn btn-primary">View/Print</button>
                    

Preview:

View/Print

Navigation Bar

• The navigation name must be on the form heading.
• The navigated link background must be colored, preferably orange.

Tables

Use DataTables with pagination and search options for history sections.
Use Bootstrap tables and apply the following classes to all tables.
For currency, text must be aligned right side.

    <table class="table table-hover table-responsive">
        <thead>
            <tr>
                <th>Header</th>
                <th>Header 2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
            </tr>
        </tbody>
    </table>
                

Preview:

Avoid using tables inside tables. Use div tags for nested data structures.

For history tables with pagination and search options, use DataTables:

    <table id="example" class="table table-hover table-bordered table-responsive">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <!-- More rows as needed -->
        </tbody>
    </table>
                

Preview:

Charts

Use React-based charts with 3D support where appropriate. Get approval from a senior developer before using 3D charts in any section.