From 89b47ef52bff182b155fe74ec80d0105ef7e8631 Mon Sep 17 00:00:00 2001
From: mominur-helios <mominur.rahman@heliosinsider.com>
Date: Sun, 23 Feb 2025 21:44:28 +0600
Subject: [PATCH] Fix dynamic DT UI

---
 apps/dyn_dt/routes.py                    |   4 +-
 apps/home/routes.py                      |   2 +-
 apps/static/assets/img/csv.png           | Bin 0 -> 9739 bytes
 apps/static/assets/img/export.png        | Bin 0 -> 6060 bytes
 apps/templates/dyn_dt/index.html         |  54 +-
 apps/templates/dyn_dt/model.html         | 737 +++++++++++------------
 apps/templates/includes/items-table.html |  25 +
 apps/templates/includes/sidebar.html     |  21 +-
 8 files changed, 422 insertions(+), 421 deletions(-)
 create mode 100644 apps/static/assets/img/csv.png
 create mode 100644 apps/static/assets/img/export.png
 create mode 100644 apps/templates/includes/items-table.html

diff --git a/apps/dyn_dt/routes.py b/apps/dyn_dt/routes.py
index b441ab4a..de1651d7 100644
--- a/apps/dyn_dt/routes.py
+++ b/apps/dyn_dt/routes.py
@@ -13,7 +13,8 @@
 def dynamic_dt():
     context = {
         'routes': config.Config.DYNAMIC_DATATB.keys(),
-        'segment': 'dynamic_dt'
+        'segment': 'dynamic_dt',
+        'parent': 'dashboard',
     }
     return render_template('dyn_dt/index.html', **context)
 
@@ -167,6 +168,7 @@ def model_dt(aPath):
         'fk_fields_keys': fk_fields.keys(),
         'fk_fields': fk_fields,
         'segment': 'dynamic_dt',
+        'parent': 'dashboard',
         'choices_dict': choices_dict,
         'exclude_auto_gen_fields': exclude_auto_gen_fields(aModelClass)
     }
diff --git a/apps/home/routes.py b/apps/home/routes.py
index 399f7a98..faef3820 100644
--- a/apps/home/routes.py
+++ b/apps/home/routes.py
@@ -12,7 +12,7 @@
 @blueprint.route('/')
 @blueprint.route('/index')
 def index():
-    return render_template('pages/index.html', segment='dashboard')
+    return render_template('pages/index.html', segment='dashboard', parent="dashboard")
 
 @blueprint.route('/billing')
 def billing():
diff --git a/apps/static/assets/img/csv.png b/apps/static/assets/img/csv.png
new file mode 100644
index 0000000000000000000000000000000000000000..330065b7216d212debf61c2c8e6e6d31729f0173
GIT binary patch
literal 9739
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
WWtK_1XuS;pf3!6WF667*-Tn^~pOfzZ

literal 0
HcmV?d00001

diff --git a/apps/static/assets/img/export.png b/apps/static/assets/img/export.png
new file mode 100644
index 0000000000000000000000000000000000000000..25cac3cd936e4242dc7485f3e966a75e0e292186
GIT binary patch
literal 6060
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

literal 0
HcmV?d00001

diff --git a/apps/templates/dyn_dt/index.html b/apps/templates/dyn_dt/index.html
index 3319b906..1178dfb1 100644
--- a/apps/templates/dyn_dt/index.html
+++ b/apps/templates/dyn_dt/index.html
@@ -7,45 +7,23 @@
 
 {% block content %}
 
-<div class="pc-container">
-    <div class="pc-content">
-        <!-- [ breadcrumb ] start -->
-        <div class="page-header">
-            <div class="page-block">
-            <div class="row align-items-center">
-                <div class="col-md-12">
-                <div class="page-header-title">
-                    <h5 class="mb-0">Profile</h5>
-                </div>
-                </div>
-                <div class="col-md-12">
-                <ul class="breadcrumb mb-0">
-                    <li class="breadcrumb-item"><a href="{{ url_for('home_blueprint.index') }}">Home</a></li>
-                    <li class="breadcrumb-item"><a href="javascript: void(0)">Basic UI</a></li>
-                    <li class="breadcrumb-item" aria-current="page">Profile</li>
-                </ul>
-                </div>
-            </div>
-            </div>
-        </div>
-        <!-- [ breadcrumb ] end -->
 
-        <div class="row">
-            <div class="col-sm-12">
-                <div class="card">
-                    <div class="card-header">
-                        <h5>Available Routes (defined in config.DYNAMIC_DATATB)</h5>
-                    </div>
-                    <div class="card-block px-4">
-                        <ul class="pc-submenu mt-3">
-                            {% for link in routes %}
-                                <li class="pc-item">
-                                    <a class="pc-link" href="{{ url_for('table_blueprint.model_dt', aPath=link) }}">{{ link }}</a>
-                                </li>
-                            {% endfor %}
-                        </ul>
-                        
-                    </div>
+<div class="container-fluid py-4">
+    <div class="row">
+        <div class="col-sm-12">
+            <div class="card">
+                <div class="card-header p-2 ps-3">
+                    <h4 class="mb-0">Available Routes (defined in config.DYNAMIC_DATATB)</h4>
+                </div>
+                <div class="card-body">
+                    <ul class="">
+                        {% for link in routes %}
+                            <li class="">
+                                <a class="" href="{{ url_for('table_blueprint.model_dt', aPath=link) }}">{{ link }}</a>
+                            </li>
+                        {% endfor %}
+                    </ul>
+                    
                 </div>
             </div>
         </div>
diff --git a/apps/templates/dyn_dt/model.html b/apps/templates/dyn_dt/model.html
index 25eec1af..7c7a4776 100644
--- a/apps/templates/dyn_dt/model.html
+++ b/apps/templates/dyn_dt/model.html
@@ -29,7 +29,6 @@
         position: absolute;
         left: 50%;
         right: 50%;
-        bottom: -10px;
     }
     .table-row:hover .data-td {
         opacity: 0.1;
@@ -37,6 +36,7 @@
     .table-row:hover .action-td {
         display: flex !important;
         gap:3px !important;
+        width: 100%;
         
     }
 </style>
@@ -44,444 +44,423 @@
 {% endblock extrastyle %}
 
 {% block content %}
-<!-- [ Main Content ] start -->
-<div class="pc-container">
-    <div class="pc-content">
-        <!-- [ breadcrumb ] start -->
-        <div class="page-header">
-            <div class="page-block">
-                <div class="row align-items-center">
-                    <div class="col-md-12">
-                        <div class="page-header-title">
-                            <h5 class="m-b-10">
-                                <a href="/">Home</a>
-                            </h5>
-                        </div>
-                        <ul class="breadcrumb">
-                            <li class="breadcrumb-item">
-                                <a href="{{ url_for('table_blueprint.dynamic_dt') }}">Dynamic DT</a>
-                            </li>
-                            <li class="breadcrumb-item"></li>
-                                <a href="{{ url_for('table_blueprint.model_dt', aPath=link) }}">{{ link|upper }}</a>
-                            </li>                            
-                        </ul>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <!-- [ breadcrumb ] end -->
 
-        <div class="row">
-            <!-- [ Typography ] start -->
-            <div class="col-sm-12">
-                <div class="card">
-                    <div class="card-body">
-
-
-                        <div class="d-flex justify-content-between my-4">
-                            <form class="search">
-                                <div class="d-flex gap-2 align-items-center">
-                                    <div class="mr-3">
-                                        <input type="text" placeholder="Search for items" name="search" id="" class="form-control">
-                                    </div>
-                                    <button type="submit" class="btn btn-primary">
-                                        <i class="ti ti-search"></i>
+<div class="container-fluid py-4">
+    <div class="row">
+        <!-- [ Typography ] start -->
+        <div class="col-sm-12">
+            <div class="card">
+                <div class="card-body">
+                    <div class="d-flex justify-content-between my-4">
+                        <form class="search">
+                            <div class="d-flex gap-2 align-items-center align-self-stretch">
+                                <div class="">
+                                    <input type="text" placeholder="Search for items" name="search" id="" class="form-control border px-2">
+                                </div>
+                                <div>
+                                    <button type="submit" class="btn mb-0 bg-gradient-dark">
+                                        <i class="fas fa-search" aria-hidden="true"></i>
                                     </button>
                                 </div>
-                            </form>
-                            <div class="">
-                                <form method="post">
-                                    <div class="dropdown">
-                                        <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-                                            Hide / Show Column
-                                        </button>
-                                        <div id="dropdownDefaultCheckbox">
-                                            <ul class="dropdown-menu hide-show-dropdown px-3">
-                                                {% for field_name in field_names %}
-                                                    <div class="form-check mb-2">
-                                                        <input class="form-check-input" {% if field_name.value %} checked {% endif %} type="checkbox" data-bs-target="{{ field_name.key }}" value="" id="checkbox-item-{{ field_name.id }}">
-                                                        <label class="form-check-label" for="checkbox-item-{{ field_name.id }}">
-                                                            {{ field_name.key }}
-                                                        </label>
-                                                    </div>
-                                                {% endfor %}
-                                            </ul>
-                                        </div>
-                                    </div>
-                                </form>
                             </div>
-                            <div class="page-size form-group">
-                                <div class="d-flex gap-2">
-                                    <form method="post" class="">
-                                        <select onchange="getPageItems(this)" name="" id="" class="form-select">
-                                            <option {% if page_items == 5 %} selected {% endif %} value="5">5 Items</option>
-                                            <option {% if page_items == 10 %} selected {% endif %} value="10">10 Items</option>
-                                            <option {% if page_items == 15 %} selected {% endif %} value="15">15 Items</option>
-                                            <option {% if page_items == 25 %} selected {% endif %} value="25">25 Items</option>
-                                            <option {% if page_items == 50 %} selected {% endif %} value="50">50 Items</option>
-                                            <option {% if page_items == 100 %} selected {% endif %} value="100">100 Items</option>
-                                        </select>
-                                    </form>
-                                    <div class="d-flex ">
-                                        <a data-bs-toggle="modal" data-bs-target="#exportCSV">
-                                            <img class="export-csv-img" style="width: 40px" src="{{ url_for('static', filename="assets/img/csv.png") }}" alt="img">
-                                        </a>
-                                    </div>
-                                    {% if current_user.is_authenticated %}
-                                    <div>
-                                        <button data-bs-toggle="modal" data-bs-target="#addSales" type="button" class="btn btn-primary p-0 px-3 py-2 ">
-                                            Add
-                                        </button>
+                        </form>
+                        <div class="">
+                            <form method="post">
+                                <div class="dropdown">
+                                    <button class="btn mb-0 bg-gradient-dark dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+                                        Hide / Show Column
+                                    </button>
+                                    <div id="dropdownDefaultCheckbox">
+                                        <ul class="dropdown-menu hide-show-dropdown p-2">
+                                            {% for field_name in field_names %}
+                                                <div class="form-check">
+                                                    <input class="form-check-input" {% if field_name.value %} checked {% endif %} type="checkbox" data-bs-target="{{ field_name.key }}" value="" id="checkbox-item-{{ field_name.id }}">
+                                                    <label class="form-check-label" for="checkbox-item-{{ field_name.id }}">
+                                                        {{ field_name.key }}
+                                                    </label>
+                                                </div>
+                                            {% endfor %}
+                                        </ul>
                                     </div>
-                                    {% endif %}
                                 </div>
+                            </form>
+                        </div>
+                        <div class="page-size form-group">
+                            <div class="d-flex gap-2">
+                                <form method="post" class="">
+                                    <select onchange="getPageItems(this)" name="" id="" class="form-select border px-2">
+                                        <option {% if page_items == 5 %} selected {% endif %} value="5">5 Items</option>
+                                        <option {% if page_items == 10 %} selected {% endif %} value="10">10 Items</option>
+                                        <option {% if page_items == 15 %} selected {% endif %} value="15">15 Items</option>
+                                        <option {% if page_items == 25 %} selected {% endif %} value="25">25 Items</option>
+                                        <option {% if page_items == 50 %} selected {% endif %} value="50">50 Items</option>
+                                        <option {% if page_items == 100 %} selected {% endif %} value="100">100 Items</option>
+                                    </select>
+                                </form>
+                                <div class="d-flex ">
+                                    <a data-bs-toggle="modal" data-bs-target="#exportCSV">
+                                        <img class="export-csv-img" style="width: 40px" src="{{ url_for('static', filename="assets/img/csv.png") }}" alt="img">
+                                    </a>
+                                </div>
+                                {% if current_user.is_authenticated %}
+                                <div>
+                                    <button data-bs-toggle="modal" data-bs-target="#addSales" type="button" class="btn mb-0 bg-gradient-dark p-0 px-3 py-2 ">
+                                        Add
+                                    </button>
+                                </div>
+                                {% endif %}
                             </div>
                         </div>
+                    </div>
 
-                        <div>
-                            <form action="{{ url_for('table_blueprint.create_filter', model_name=link) }}" method="post">
-                    
-                                <div class="d-flex align-items-center gap-3 mb-3">
-                                    <h3 class="">Filters</h3>
-                                    <button id="addButton" type="button" class="btn btn-primary">Add</button>
-                                </div>
+                    <div>
+                        <form action="{{ url_for('table_blueprint.create_filter', model_name=link) }}" method="post">
+                
+                            <div class="d-flex align-items-center gap-3 mb-3">
+                                <h3 class="">Filters</h3>
+                                <button id="addButton" type="button" class="btn mb-0 bg-gradient-dark">Add</button>
+                            </div>
 
-                                <div class="mb-3" id="inputContainer">
-                                    {% if filter_instance %}
-                                        {% for filter_data in filter_instance %}
-                                        <div class="d-flex gap-3 mb-3">
-                                            <div class="d-flex gap-2">
-                                                <select name="key" id="" class="form-select w-50">
-
-                                                    {% for field in db_field_names %}
-                                                        <option {% if filter_data.key == field %}selected{% endif %} value="{{ field }}">{{ field }}</option>
-                                                    {% endfor %}
-                                                </select>
-                                                <input type="text" value="{{ filter_data.value }}" placeholder="Enter value" name="value" id="" class="form-control">
-                                            </div>
-                                            <a href="{{ url_for('table_blueprint.delete_filter', model_name=link, id=filter_data.id) }}" class="remove-button btn btn-danger">X</a>
+                            <div class="mb-3" id="inputContainer">
+                                {% if filter_instance %}
+                                    {% for filter_data in filter_instance %}
+                                    <div class="input-container d-flex align-items-center gap-3 mb-3">
+                                        <div class="d-flex gap-2">
+                                            <select name="key" class="form-select border px-2 w-50">
+                                                {% for field in db_field_names %}
+                                                    <option {% if filter_data.key == field %}selected{% endif %} value="{{ field }}">{{ field }}</option>
+                                                {% endfor %}
+                                            </select>
+                                            <input name="value" value="{{ filter_data.value }}" class="form-control border px-2" type="text" placeholder="Enter value">
                                         </div>
-                                        {% endfor %}
-                                    {% endif %}
-                                </div>
-                                <button id="submitButton" type="submit" {% if not filter_instance %} style="display: none;" {% endif %} class="btn btn-success">Submit</button>
-                            </form>
+                                        <a href="{{ url_for('table_blueprint.delete_filter', model_name=link, id=filter_data.id) }}" class="remove-button btn btn-danger mb-0">X</a>
+                                    </div>
+                                    {% endfor %}
+                                {% endif %}
+                            </div>
+                            <button id="submitButton" type="submit" {% if not filter_instance %} style="display: none;" {% endif %} class="btn mb-0 btn-success">Submit</button>
+                        </form>
 
 
 
-                            <div class="card-body">
-                                <div class="dt-responsive table-responsive">
-                                    <table class="table">
-                                        <thead>
-                                        <tr>
-                                            {% for field in db_field_names %}
-                                                <th id="th_{{ field }}" scope="col">{{ field }}</th>
-                                            {% endfor %}
-                                        </tr>
-                                        </thead>
-                                        <tbody>
-                                            {% for item in items %}
-                                            <tr class="align-middle table-row">
-                                                {% for field_name in db_field_names %}
-                                                    {% if field_name in choices_dict %}
-                                                    <td class="td_{{ field_name }} data-td">{{ item|getenumattribute(field_name) }}</td>
-                                                    {% else %}
-                                                    <td class="td_{{ field_name }} data-td">{{ item|getattribute(field_name) }}</td>
-                                                    {% endif %}
-                                                {% endfor %}
-                    
-                                                {% if current_user.is_authenticated %}
-                                                <td class="d-none action-td" >
-                                                    <a data-bs-toggle="modal" data-bs-target="#editSales-{{item.id}}" class="btn btn-primary btn-sm p-0 px-3 py-2 " href="#"><i class="ti ti-edit"></i></a>
-                                                    <a data-bs-toggle="modal" data-bs-target="#deleteSales-{{item.id}}" class="btn btn-danger btn-sm p-0 px-3 py-2 " href="#"><i class="ti ti-trash"></i></a>
-                                                </td>
+                        <div class="card-body">
+                            <div class="dt-responsive table-responsive">
+                                <table class="table">
+                                    <thead>
+                                    <tr>
+                                        {% for field in db_field_names %}
+                                            <th id="th_{{ field }}" class="px-0" scope="col">{{ field }}</th>
+                                        {% endfor %}
+                                    </tr>
+                                    </thead>
+                                    <tbody>
+                                        {% for item in items %}
+                                        <tr class="align-middle table-row">
+                                            {% for field_name in db_field_names %}
+                                                {% if field_name in choices_dict %}
+                                                <td class="td_{{ field_name }} data-td px-0">{{ item|getenumattribute(field_name) }}</td>
                                                 {% else %}
-                                                <td class="d-none action-td">
-                                                    <a data-bs-toggle="modal" data-bs-target="#viewSales-{{item.id}}" class="btn btn-primary btn-sm p-0 px-3 py-2 " href="#"><i class="ti ti-eye"></i></a>
-                                                </td>
+                                                <td class="td_{{ field_name }} data-td px-0">{{ item|getattribute(field_name) }}</td>
                                                 {% endif %}
-                                            </tr>
-                    
-                                            <!-- Edit Sales -->
-                                            <div class="modal fade" id="editSales-{{item.id}}" tabindex="-1" aria-labelledby="editSalesLabel" aria-hidden="true">
-                                                <div class="modal-dialog modal-dialog-centered modal-xl">
-                                                    <div class="modal-content">
-                                                        <div class="modal-header">
-                                                            <div class="d-flex justify-content-between">
-                                                                <div>
-                                                                    <h1 class="modal-title fs-5" id="editSalesLabel">Edit {{ link }}</h1>
-                                                                </div>
-                                                                <div>
-                                                                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
-                                                                        <span aria-hidden="true">&times;</span>
-                                                                    </button>
-                                                                </div>
+                                            {% endfor %}
+                
+                                            {% if current_user.is_authenticated %}
+                                            <td class="d-none action-td" >
+                                                <a data-bs-toggle="modal" data-bs-target="#editSales-{{item.id}}" class="btn mb-1 bg-gradient-dark" href="#">
+                                                    <i class="fa fa-edit">edit</i>
+                                                </a>
+                                                <a data-bs-toggle="modal" data-bs-target="#deleteSales-{{item.id}}" class="btn mb-1 btn-danger" href="#">
+                                                    <i class="fa fa-trash">delete</i>
+                                                </a>
+                                            </td>
+                                            {% else %}
+                                            <td class="d-none action-td">
+                                                <a data-bs-toggle="modal" data-bs-target="#viewSales-{{item.id}}" class="btn mb-1 bg-gradient-dark" href="#">
+                                                    <i class="fa fa-eye">visibility</i>
+                                                </a>
+                                            </td>
+                                            {% endif %}
+                                        </tr>
+                
+                                        <!-- Edit Sales -->
+                                        <div class="modal fade" id="editSales-{{item.id}}" tabindex="-1" aria-labelledby="editSalesLabel" aria-hidden="true">
+                                            <div class="modal-dialog modal-dialog-centered modal-lg">
+                                                <div class="modal-content">
+                                                    <div class="modal-header">
+                                                        <div class="d-flex justify-content-between">
+                                                            <div>
+                                                                <h1 class="modal-title fs-5" id="editSalesLabel">Edit {{ link }}</h1>
+                                                            </div>
+                                                            <div>
+                                                                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
+                                                                    <span aria-hidden="true">&times;</span>
+                                                                </button>
                                                             </div>
                                                         </div>
-                                                        <div class="modal-body">
-                                                            <form action="{{ url_for('table_blueprint.update', aPath=link, id=item.id ) }}" method="post" class="">
-                                                                
-                                                                <div class="row">
-                                                                    <!-- FKs -->
-                                                                    {% for key, values in fk_fields.items() %}
-                                                                    <div class="col-md-6">
-                                                                        <div class="form-group">
-                                                                            <label for="id_{{ key }}" class="form-label">{{ key }}</label>
-                                                                            <select class="form-control" name="{{ key }}" id="id_{{ key }}">
-                                                                                {% for i in values %}
-                                                                                    <option value="{{ i.id }}">{{ i }}</option>
-                                                                                {% endfor %}
-                                                                            </select>                                                    
-                                                                        </div>
+                                                    </div>
+                                                    <div class="modal-body">
+                                                        <form action="{{ url_for('table_blueprint.update', aPath=link, id=item.id ) }}" method="post" class="">
+                                                            
+                                                            <div class="row">
+                                                                <!-- FKs -->
+                                                                {% for key, values in fk_fields.items() %}
+                                                                <div class="col-md-6">
+                                                                    <div class="form-group">
+                                                                        <label for="id_{{ key }}" class="form-label">{{ key }}</label>
+                                                                        <select class="form-select border px-2" name="{{ key }}" id="id_{{ key }}">
+                                                                            {% for i in values %}
+                                                                                <option value="{{ i.id }}">{{ i }}</option>
+                                                                            {% endfor %}
+                                                                        </select>                                                    
                                                                     </div>
-                                                                    {% endfor %}
-    
-                                                                    {% for field_name in db_field_names %}
-                                                                        {% if field_name not in read_only_fields and field_name not in fk_fields_keys and field_name not in exclude_auto_gen_fields %}
-                                                                        <div class="col-md-6">
-                                                                            <div class="form-group">                                                                    
-                                                                                <label for="id_{{ field_name }}" class="form-label">{{ field_name|title }}</label>
-                                                                                {% if field_name in choices_dict %}
-                                                                                    <select name="{{ field_name }}" id="id_{{ field_name }}" class="form-select">
-                                                                                        <option value="">Select {{ field_name }}</option>
-                                                                                        {% for key, value in choices_dict|get(field_name) %}
-                                                                                            <option {% if item|getenumattribute(field_name) == value %}selected{% endif %} value="{{ value }}">{{ key }}</option>
-                                                                                        {% endfor %}
-                                                                                    </select>
+                                                                </div>
+                                                                {% endfor %}
+
+                                                                {% for field_name in db_field_names %}
+                                                                    {% if field_name not in read_only_fields and field_name not in fk_fields_keys and field_name not in exclude_auto_gen_fields %}
+                                                                    <div class="col-md-6">
+                                                                        <div class="form-group mb-3">                                                                    
+                                                                            <label for="id_{{ field_name }}" class="form-label">{{ field_name|title }}</label>
+                                                                            {% if field_name in choices_dict %}
+                                                                                <select name="{{ field_name }}" id="id_{{ field_name }}" class="form-select border px-2">
+                                                                                    <option value="">Select {{ field_name }}</option>
+                                                                                    {% for key, value in choices_dict|get(field_name) %}
+                                                                                        <option {% if item|getenumattribute(field_name) == value %}selected{% endif %} value="{{ value }}">{{ key }}</option>
+                                                                                    {% endfor %}
+                                                                                </select>
+                                                                            {% else %}
+                                                                                {% if field_name in integer_fields %}
+                                                                                <input type="number" name="{{ field_name }}" value="{{ item|getattribute(field_name) }}" class="form-control border px-2" placeholder="{{ field_name }}" id="id_{{ field_name }}">
+                                                                                {% elif field_name in date_time_fields %}
+                                                                                <input type="datetime-local" name="{{ field_name }}" value="{{ item|getattribute(field_name) }}" class="form-control border px-2" placeholder="{{ field_name }}" id="id_{{ field_name }}">
+                                                                                {% elif field_name in email_fields %}
+                                                                                <input type="email" name="{{ field_name }}" value="{{ item|getattribute(field_name) }}" class="form-control border px-2" placeholder="{{ field_name }}" id="id_{{ field_name }}">
+                                                                                {% elif field_name in text_fields %}
+                                                                                <input type="text" name="{{ field_name }}" value="{{ item|getattribute(field_name) }}" class="form-control border px-2" placeholder="{{ field_name }}" id="id_{{ field_name }}">
                                                                                 {% else %}
-                                                                                    {% if field_name in integer_fields %}
-                                                                                    <input type="number" name="{{ field_name }}" value="{{ item|getattribute(field_name) }}" class="form-control" placeholder="{{ field_name }}" id="id_{{ field_name }}">
-                                                                                    {% elif field_name in date_time_fields %}
-                                                                                    <input type="datetime-local" name="{{ field_name }}" value="{{ item|getattribute(field_name) }}" class="form-control" placeholder="{{ field_name }}" id="id_{{ field_name }}">
-                                                                                    {% elif field_name in email_fields %}
-                                                                                    <input type="email" name="{{ field_name }}" value="{{ item|getattribute(field_name) }}" class="form-control" placeholder="{{ field_name }}" id="id_{{ field_name }}">
-                                                                                    {% elif field_name in text_fields %}
-                                                                                    <input type="text" name="{{ field_name }}" value="{{ item|getattribute(field_name) }}" class="form-control" placeholder="{{ field_name }}" id="id_{{ field_name }}">
-                                                                                    {% else %}
-                                                                                    <input type="text" name="{{ field_name }}" value="{{ item|getattribute(field_name) }}" class="form-control" placeholder="{{ field_name }}" id="id_{{ field_name }}">
-                                                                                    {% endif %}
+                                                                                <input type="text" name="{{ field_name }}" value="{{ item|getattribute(field_name) }}" class="form-control border px-2" placeholder="{{ field_name }}" id="id_{{ field_name }}">
                                                                                 {% endif %}
-                                                                            </div>
+                                                                            {% endif %}
                                                                         </div>
-                                                                        {% endif %}
-                                                                    {% endfor %}
-                                                                </div>
+                                                                    </div>
+                                                                    {% endif %}
+                                                                {% endfor %}
+                                                            </div>
 
-                                                                <div>
-                                                                    <button type="submit" class="btn btn-primary">Save</button>
-                                                                </div>
-                                                            </form>
-                                                        </div>
+                                                            <div>
+                                                                <button type="submit" class="btn mb-0 bg-gradient-dark">Save</button>
+                                                            </div>
+                                                        </form>
                                                     </div>
                                                 </div>
                                             </div>
-                    
-                                            <!-- Delete Sales -->
-                                            <div class="modal fade" id="deleteSales-{{item.id}}" tabindex="-1" aria-labelledby="deleteSalesLabel" aria-hidden="true">
-                                                <div class="modal-dialog">
-                                                <div class="modal-content">
-                                                    <div class="modal-header">
-                                                    <div class="d-flex justify-content-between">
-                                                        <div>
-                                                            <h1 class="modal-title fs-5" id="deleteSalesLabel">Delete Item</h1>
-                                                        </div>
-                                                        <div>
-                                                            <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
-                                                                <span aria-hidden="true">&times;</span>
-                                                            </button>
-                                                        </div>
-                                                    </div>
-                                                    </div>
-                                                    <div class="modal-body">
-                                                        <h5>Are you sure you want to delete this item?</h5>
+                                        </div>
+                
+                                        <!-- Delete Sales -->
+                                        <div class="modal fade" id="deleteSales-{{item.id}}" tabindex="-1" aria-labelledby="deleteSalesLabel" aria-hidden="true">
+                                            <div class="modal-dialog">
+                                            <div class="modal-content">
+                                                <div class="modal-header">
+                                                <div class="d-flex justify-content-between">
+                                                    <div>
+                                                        <h1 class="modal-title fs-5" id="deleteSalesLabel">Delete Item</h1>
                                                     </div>
-                                                    <div class="modal-footer">
-                                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
-                                                        <a href="{{ url_for('table_blueprint.delete', aPath=link, id=item.id ) }}" class="btn btn-danger">Delete</a>
+                                                    <div>
+                                                        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
+                                                            <span aria-hidden="true">&times;</span>
+                                                        </button>
                                                     </div>
                                                 </div>
                                                 </div>
+                                                <div class="modal-body">
+                                                    <h5>Are you sure you want to delete this item?</h5>
+                                                </div>
+                                                <div class="modal-footer">
+                                                    <button type="button" class="btn mb-0 btn-secondary" data-bs-dismiss="modal">Close</button>
+                                                    <a href="{{ url_for('table_blueprint.delete', aPath=link, id=item.id ) }}" class="btn mb-0 btn-danger">Delete</a>
+                                                </div>
                                             </div>
-    
-                                            <!-- View Sales -->
-                                            <div class="modal fade" id="viewSales-{{item.id}}" tabindex="-1" aria-labelledby="viweSalesLabel" aria-hidden="true">
-                                                <div class="modal-dialog modal-dialog-centered modal-xl">
-                                                    <div class="modal-content">
-                                                        <div class="modal-header">
-                                                            <div class="d-flex justify-content-between">
-                                                                <div>
-                                                                    <h1 class="modal-title fs-5" id="viewSalesLabel">View {{ link }}</h1>
-                                                                </div>
-                                                                <div>
-                                                                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
-                                                                        <span aria-hidden="true">&times;</span>
-                                                                    </button>
-                                                                </div>
+                                            </div>
+                                        </div>
+
+                                        <!-- View Sales -->
+                                        <div class="modal fade" id="viewSales-{{item.id}}" tabindex="-1" aria-labelledby="viweSalesLabel" aria-hidden="true">
+                                            <div class="modal-dialog modal-dialog-centered modal-lg">
+                                                <div class="modal-content">
+                                                    <div class="modal-header">
+                                                        <div class="d-flex justify-content-between">
+                                                            <div>
+                                                                <h1 class="modal-title fs-5" id="viewSalesLabel">View {{ link }}</h1>
+                                                            </div>
+                                                            <div>
+                                                                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
+                                                                    <span aria-hidden="true">&times;</span>
+                                                                </button>
                                                             </div>
                                                         </div>
-                                                        <div class="modal-body">
-                                                            <form action="#" method="post">
-                                                                
-                                                                <div class="row">
-                                                                    {% for field_name in db_field_names %}
-                                                                    <div class="col-md-6">
-                                                                        <div class="form-group">
-                                                                            <label for="{{ field_name }}" class="form-label">{{ field_name|title }}</label>
-                                                                            <input readonly type="text" value="{{ item|getattribute(field_name) }}" name="{{ field_name }}" id="{{ field_name }}" class="form-control">
-                                                                        </div>
+                                                    </div>
+                                                    <div class="modal-body">
+                                                        <form action="#" method="post">
+                                                            
+                                                            <div class="row">
+                                                                {% for field_name in db_field_names %}
+                                                                <div class="col-md-6">
+                                                                    <div class="form-group mb-3">
+                                                                        <label for="{{ field_name }}" class="form-label">{{ field_name|title }}</label>
+                                                                        <input readonly type="text" value="{{ item|getattribute(field_name) }}" name="{{ field_name }}" id="{{ field_name }}" class="form-control border px-2">
                                                                     </div>
-                                                                    {% endfor %}
                                                                 </div>
-                                                            </form>
-                                                        </div>
+                                                                {% endfor %}
+                                                            </div>
+                                                        </form>
                                                     </div>
                                                 </div>
                                             </div>
-                    
-                                            {% endfor %}
-                                        </tbody>
-                                    </table>
-                                </div>
+                                        </div>
+                
+                                        {% endfor %}
+                                    </tbody>
+                                </table>
                             </div>
+                        </div>
 
 
-                            {% if pagination.has_prev or pagination.has_next %}
-                                <nav aria-label="Page navigation example">
-                                    <ul class="pagination justify-content-center">
-                                        {% if pagination.has_prev %}
-                                            <li class="page-item">
-                                                <a class="page-link" href="?page={{ pagination.prev_num }}" aria-label="Previous">
-                                                    <span aria-hidden="true">&laquo;</span>
-                                                    <span class="sr-only">Previous</span>
-                                                </a>
-                                            </li>
-                                        {% endif %}
-                                        {% for n in range(1, pagination.pages + 1) %}
-                                            {% if pagination.page == n %}
-                                                <li class="page-item active"><a class="page-link">{{ n }}</a></li>
-                                            {% elif n > pagination.page - 3 and n < pagination.page + 3 %}
-                                                <li class="page-item"><a class="page-link" href="?page={{ n }}">{{ n }}</a></li>
-                                            {% endif %}
-                                        {% endfor %}
-                                        {% if pagination.has_next %}
-                                            <li class="page-item">
-                                                <a class="page-link" href="?page={{ pagination.next_num }}" aria-label="Next">
-                                                    <span aria-hidden="true">&raquo;</span>
-                                                    <span class="sr-only">Next</span>
-                                                </a>
-                                            </li>
+                        {% if pagination.has_prev or pagination.has_next %}
+                            <nav aria-label="Page navigation example">
+                                <ul class="pagination justify-content-center">
+                                    {% if pagination.has_prev %}
+                                        <li class="page-item">
+                                            <a class="page-link" href="?page={{ pagination.prev_num }}" aria-label="Previous">
+                                                <span aria-hidden="true">&laquo;</span>
+                                                <span class="sr-only">Previous</span>
+                                            </a>
+                                        </li>
+                                    {% endif %}
+                                    {% for n in range(1, pagination.pages + 1) %}
+                                        {% if pagination.page == n %}
+                                            <li class="page-item active"><a class="page-link">{{ n }}</a></li>
+                                        {% elif n > pagination.page - 3 and n < pagination.page + 3 %}
+                                            <li class="page-item"><a class="page-link" href="?page={{ n }}">{{ n }}</a></li>
                                         {% endif %}
-                                    </ul>
-                                </nav>
-                            {% endif %}
-
+                                    {% endfor %}
+                                    {% if pagination.has_next %}
+                                        <li class="page-item">
+                                            <a class="page-link" href="?page={{ pagination.next_num }}" aria-label="Next">
+                                                <span aria-hidden="true">&raquo;</span>
+                                                <span class="sr-only">Next</span>
+                                            </a>
+                                        </li>
+                                    {% endif %}
+                                </ul>
+                            </nav>
+                        {% endif %}
 
-                        </div>
 
                     </div>
 
+                </div>
 
-                    <!-- Export as CSV -->
-                    <div class="modal fade" id="exportCSV" tabindex="-1" aria-labelledby="exportCSVLabel" aria-hidden="true">
-                        <div class="modal-dialog modal-dialog-centered modal-xl">
-                            <div class="modal-content">
-                                <div class="modal-header">
-                                    <div class="d-flex justify-content-between">
-                                        <div>
-                                            <h1 class="modal-title fs-5" id="exportCSVLabel">Export as CSV</h1>
-                                        </div>
-                                        <div>
 
-                                            <a href="{{ url_for('table_blueprint.export_csv', aPath=link) }}">
-                                                <img style="width: 30px" class="export-img" src="{{ url_for('static', filename='assets/img/export.png') }}" alt="">
-                                            </a>
+                <!-- Export as CSV -->
+                <div class="modal fade" id="exportCSV" tabindex="-1" aria-labelledby="exportCSVLabel" aria-hidden="true">
+                    <div class="modal-dialog modal-dialog-centered modal-lg">
+                        <div class="modal-content">
+                            <div class="modal-header">
+                                <div class="d-flex justify-content-between">
+                                    <div>
+                                        <h1 class="modal-title fs-5" id="exportCSVLabel">Export as CSV</h1>
+                                    </div>
+                                    <div>
+
+                                        <a href="{{ url_for('table_blueprint.export_csv', aPath=link) }}">
+                                            <img style="width: 30px" class="export-img" src="{{ url_for('static', filename='assets/img/export.png') }}" alt="">
+                                        </a>
 
-                                        </div>
-                                        <div>
-                                            <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
-                                                <span aria-hidden="true">&times;</span>
-                                            </button>
-                                        </div>
                                     </div>
-                                </div>
-                                <div class="modal-body">
-                                {% include "includes/items-table.html" %}
+                                    <div>
+                                        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
+                                            <span aria-hidden="true">&times;</span>
+                                        </button>
+                                    </div>
                                 </div>
                             </div>
+                            <div class="modal-body">
+                            {% include "includes/items-table.html" %}
+                            </div>
                         </div>
                     </div>
+                </div>
 
-                    <!-- Add Sales -->
-                    <div class="modal fade" id="addSales" tabindex="-1" aria-labelledby="addSalesLabel" aria-hidden="true">
-                        <div class="modal-dialog modal-dialog-centered modal-xl">
-                            <div class="modal-content">
-                                <div class="modal-header">
-                                    <div class="d-flex justify-content-between">
-                                        <div>
-                                            <h1 class="modal-title fs-5" id="addSalesLabel">Add {{ link }}</h1>
-                                        </div>
-                                        <div>
-                                            <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
-                                                <span aria-hidden="true">&times;</span>
-                                            </button>
-                                        </div>
+                <!-- Add Sales -->
+                <div class="modal fade" id="addSales" tabindex="-1" aria-labelledby="addSalesLabel" aria-hidden="true">
+                    <div class="modal-dialog modal-dialog-centered modal-lg">
+                        <div class="modal-content">
+                            <div class="modal-header">
+                                <div class="d-flex justify-content-between">
+                                    <div>
+                                        <h1 class="modal-title fs-5" id="addSalesLabel">Add {{ link }}</h1>
+                                    </div>
+                                    <div>
+                                        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
+                                            <span aria-hidden="true">&times;</span>
+                                        </button>
                                     </div>
                                 </div>
-                                <div class="modal-body">
-                                    <form method="post" action="{{ url_for('table_blueprint.create', aPath=link) }}" class="row">
-
-                                        <!-- FKs -->
-                                        {% for field, values in fk_fields.items() %}
-                                        <div class="col-md-6">
-                                            <div class="form-group">
-                                                <label for="id_{{ field }}" class="form-label">{{ field|title }}</label>
-                                                <select class="form-control" name="{{ field }}" id="id_{{ field }}">
-                                                    {% for i in values %}
-                                                        <option value="{{ i.id }}">{{ i }}</option>
-                                                    {% endfor %}
-                                                </select>                                                    
-                                            </div>
+                            </div>
+                            <div class="modal-body">
+                                <form method="post" action="{{ url_for('table_blueprint.create', aPath=link) }}" class="row">
+
+                                    <!-- FKs -->
+                                    {% for field, values in fk_fields.items() %}
+                                    <div class="col-md-6">
+                                        <div class="form-group">
+                                            <label for="id_{{ field }}" class="form-label">{{ field|title }}</label>
+                                            <select class="form-select border px-2" name="{{ field }}" id="id_{{ field }}">
+                                                {% for i in values %}
+                                                    <option value="{{ i.id }}">{{ i }}</option>
+                                                {% endfor %}
+                                            </select>                                                    
                                         </div>
-                                        {% endfor %}
+                                    </div>
+                                    {% endfor %}
 
-                                        {% for field_name in db_field_names %}
-                                            {% if field_name not in read_only_fields and field_name not in fk_fields_keys and field_name not in exclude_auto_gen_fields %}
-                                            <div class="col-md-6">
-                                                <div class="form-group">
-                                                    <label for="id_{{ field_name }}" class="form-label">{{ field_name|title }}</label>
-                                                    {% if field_name in choices_dict %}
-                                                        <select name="{{ field_name }}" id="id_{{ field_name }}" class="form-select">
-                                                            <option value="">Select {{ field_name }}</option>
-                                                            {% for key, value in choices_dict|get(field_name) %}
-                                                                <option value="{{ key }}">{{ key }}</option>
-                                                            {% endfor %}
-                                                        </select>
+                                    {% for field_name in db_field_names %}
+                                        {% if field_name not in read_only_fields and field_name not in fk_fields_keys and field_name not in exclude_auto_gen_fields %}
+                                        <div class="col-md-6">
+                                            <div class="form-group mb-3">
+                                                <label for="id_{{ field_name }}" class="form-label">{{ field_name|title }}</label>
+                                                {% if field_name in choices_dict %}
+                                                    <select name="{{ field_name }}" id="id_{{ field_name }}" class="form-select border px-2">
+                                                        <option value="">Select {{ field_name }}</option>
+                                                        {% for key, value in choices_dict|get(field_name) %}
+                                                            <option value="{{ key }}">{{ key }}</option>
+                                                        {% endfor %}
+                                                    </select>
+                                                {% else %}
+                                                    {% if field_name in integer_fields %}
+                                                    <input type="number" name="{{ field_name }}" class="form-control border px-2" placeholder="{{ field_name|title }}" id="id_{{ field_name }}">
+                                                    {% elif field_name in date_time_fields %}
+                                                    <input type="datetime-local" name="{{ field_name }}" class="form-control border px-2" placeholder="{{ field_name|title }}" id="id_{{ field_name }}">
+                                                    {% elif field_name in email_fields %}
+                                                    <input type="email" name="{{ field_name }}" class="form-control border px-2" placeholder="{{ field_name|title }}" id="id_{{ field_name }}">
                                                     {% else %}
-                                                        {% if field_name in integer_fields %}
-                                                        <input type="number" name="{{ field_name }}" class="form-control" placeholder="{{ field_name|title }}" id="id_{{ field_name }}">
-                                                        {% elif field_name in date_time_fields %}
-                                                        <input type="datetime-local" name="{{ field_name }}" class="form-control" placeholder="{{ field_name|title }}" id="id_{{ field_name }}">
-                                                        {% elif field_name in email_fields %}
-                                                        <input type="email" name="{{ field_name }}" class="form-control" placeholder="{{ field_name|title }}" id="id_{{ field_name }}">
-                                                        {% else %}
-                                                        <input type="text" name="{{ field_name }}" class="form-control" placeholder="{{ field_name|title }}" id="id_{{ field_name }}">
-                                                        {% endif %}
+                                                    <input type="text" name="{{ field_name }}" class="form-control border px-2" placeholder="{{ field_name|title }}" id="id_{{ field_name }}">
                                                     {% endif %}
-                                                </div>
+                                                {% endif %}
                                             </div>
-                                            {% endif %}
-                                        {% endfor %}
-                                        
-                                        <div>
-                                            <button type="submit" class="btn btn-primary">Add</button>
                                         </div>
-                                    </form>
-                                </div>
+                                        {% endif %}
+                                    {% endfor %}
+                                    
+                                    <div>
+                                        <button type="submit" class="btn mb-0 bg-gradient-dark">Add</button>
+                                    </div>
+                                </form>
                             </div>
                         </div>
                     </div>
-
                 </div>
+
             </div>
         </div>
         
@@ -576,13 +555,13 @@ <h1 class="modal-title fs-5" id="addSalesLabel">Add {{ link }}</h1>
   
       var template = `
         <div class="input-container d-flex align-items-center gap-3 mb-3">
-          <div class="d-flex gap-2">
-            <select name="key" class="form-select w-50">
-              ${fieldNames.map(option => `<option value="${option}">${option}</option>`).join('')}
-            </select>
-            <input name="value" class="form-control" type="text" placeholder="Enter value">
-          </div>
-          <button class="remove-button btn btn-danger" onclick="removeInputContainer(this)">X</button>
+            <div class="d-flex gap-2">
+                <select name="key" class="form-select border px-2 w-50">
+                ${fieldNames.map(option => `<option value="${option}">${option}</option>`).join('')}
+                </select>
+                <input name="value" class="form-control border px-2" type="text" placeholder="Enter value">
+            </div>
+            <button class="remove-button btn btn-danger mb-0" onclick="removeInputContainer(this)">X</button>
         </div>
       `;
   
diff --git a/apps/templates/includes/items-table.html b/apps/templates/includes/items-table.html
new file mode 100644
index 00000000..7daf7c40
--- /dev/null
+++ b/apps/templates/includes/items-table.html
@@ -0,0 +1,25 @@
+
+<div class="dt-responsive table-responsive">
+    <table class="table">
+        <thead>
+          <tr>
+            {% for field in db_field_names %}
+                <th id="th_{{ field }}_export" class="px-0" scope="col">{{ field }}</th>
+            {% endfor %}
+          </tr>
+        </thead>
+        <tbody>
+            {% for item in items %}
+            <tr>
+                {% for field_name in db_field_names %}
+                    {% if field_name in choices_dict %}
+                    <td class="td_{{ field_name }} px-0">{{ item|getenumattribute(field_name) }}</td>
+                    {% else %}
+                    <td class="td_{{ field_name }} px-0">{{ item|getattribute(field_name) }}</td>
+                    {% endif %}
+                {% endfor %}
+            </tr>
+             {% endfor %}
+        </tbody>
+    </table>
+</div>
\ No newline at end of file
diff --git a/apps/templates/includes/sidebar.html b/apps/templates/includes/sidebar.html
index 81ebebf7..dd3f60f4 100644
--- a/apps/templates/includes/sidebar.html
+++ b/apps/templates/includes/sidebar.html
@@ -11,8 +11,8 @@
       <ul class="navbar-nav">
 
         <li class="nav-item">
-          <a class="nav-link {% if segment == 'dashboard' %}active{% endif %}" href="{{ url_for('home_blueprint.index') }}">
-            <div class="icon icon-shape icon-sm shadow border-radius-md bg-white text-center me-2 d-flex align-items-center justify-content-center">
+          <a data-bs-toggle="collapse" href="#dashboard-dropdown" class="nav-link {% if 'dashboard' in parent %}active{% endif %}" aria-controls="dashboard-dropdown" role="button" aria-expanded="false">
+            <div class="icon icon-shape icon-sm shadow border-radius-md bg-white text-center d-flex align-items-center justify-content-center  me-2">
               <svg width="12px" height="12px" viewBox="0 0 45 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                 <title>shop </title>
                 <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
@@ -29,7 +29,24 @@
             </div>
             <span class="nav-link-text ms-1">Dashboard</span>
           </a>
+          <div class="collapse {% if 'dashboard' in parent %}show{% endif %} " id="dashboard-dropdown">
+            <ul class="nav ms-4 ps-3">
+              <li class="nav-item {% if 'dashboard' in segment %}active{% endif %}">
+                <a class="nav-link {% if 'dashboard' in segment %}active{% endif %}" href="{{ url_for('home_blueprint.index') }}">
+                  <span class="sidenav-mini-icon"> D </span>
+                  <span class="sidenav-normal"> Default </span>
+                </a>
+              </li> 
+              <li class="nav-item {% if 'dynamic_dt' in segment %}active{% endif %}">
+                <a class="nav-link {% if 'dynamic_dt' in segment %}active{% endif %}" href="{{ url_for('table_blueprint.dynamic_dt') }}">
+                  <span class="sidenav-mini-icon"> D </span>
+                  <span class="sidenav-normal"> Dynamic DT </span>
+                </a>
+              </li> 
+            </ul>
+          </div>
         </li>
+
         <li class="nav-item">
           <a class="nav-link {% if segment == 'tables' %}active{% endif %}" href="{{ url_for('home_blueprint.tables') }}">
             <div class="icon icon-shape icon-sm shadow border-radius-md bg-white text-center me-2 d-flex align-items-center justify-content-center">