+
+
+
+
+
+
+
+
+
+ + Code Backend Theme +
+Minimalist and Elegant Backend + Theme for Odoo 14
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+ + The Code Backend Theme V14 Gives You a Fully Modified View with a Full Screen Display. + This is a Minimalist and Elegant Backend Theme for Odoo 14. + This Theme Will Change Your Old Experience to a New Experience With Odoo. + It is a Perfect Choice for Your Odoo Backend and an Attractive Theme for Your Odoo 14. + It will Give You a Clean Layout with a New Color Combination and a Modified Font. It has a + Sidebar with + New App Icons and Company Logo. This Will Change Your Old Kanban, List and Form Views to A Fully + Modified View. +
+
+
+
+ Please make sure that you install
+ all
+ your apps prior to the installation of this theme.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/code_backend_theme/static/description/theme_screenshot.png b/code_backend_theme/static/description/theme_screenshot.png
new file mode 100644
index 0000000..47ea6ac
Binary files /dev/null and b/code_backend_theme/static/description/theme_screenshot.png differ
diff --git a/code_backend_theme/static/src/img/code_logo.png b/code_backend_theme/static/src/img/code_logo.png
new file mode 100644
index 0000000..124152a
Binary files /dev/null and b/code_backend_theme/static/src/img/code_logo.png differ
diff --git a/code_backend_theme/static/src/img/icons/Attendances.png b/code_backend_theme/static/src/img/icons/Attendances.png
new file mode 100644
index 0000000..6f2e83d
Binary files /dev/null and b/code_backend_theme/static/src/img/icons/Attendances.png differ
diff --git a/code_backend_theme/static/src/img/icons/CRM.png b/code_backend_theme/static/src/img/icons/CRM.png
new file mode 100644
index 0000000..01e3261
Binary files /dev/null and b/code_backend_theme/static/src/img/icons/CRM.png differ
diff --git a/code_backend_theme/static/src/img/icons/Calendar.png b/code_backend_theme/static/src/img/icons/Calendar.png
new file mode 100644
index 0000000..bfa7e47
Binary files /dev/null and b/code_backend_theme/static/src/img/icons/Calendar.png differ
diff --git a/code_backend_theme/static/src/img/icons/Contacts.png b/code_backend_theme/static/src/img/icons/Contacts.png
new file mode 100644
index 0000000..5865350
Binary files /dev/null and b/code_backend_theme/static/src/img/icons/Contacts.png differ
diff --git a/code_backend_theme/static/src/img/icons/Dashboards.png b/code_backend_theme/static/src/img/icons/Dashboards.png
new file mode 100644
index 0000000..0ab4196
Binary files /dev/null and b/code_backend_theme/static/src/img/icons/Dashboards.png differ
diff --git a/code_backend_theme/static/src/img/icons/Email Marketing.png b/code_backend_theme/static/src/img/icons/Email Marketing.png
new file mode 100644
index 0000000..66c873a
Binary files /dev/null and b/code_backend_theme/static/src/img/icons/Email Marketing.png differ
diff --git a/code_backend_theme/static/src/img/icons/Employees.png b/code_backend_theme/static/src/img/icons/Employees.png
new file mode 100644
index 0000000..85aff52
Binary files /dev/null and b/code_backend_theme/static/src/img/icons/Employees.png differ
diff --git a/code_backend_theme/static/src/img/icons/Events.png b/code_backend_theme/static/src/img/icons/Events.png
new file mode 100644
index 0000000..b0c5e71
Binary files /dev/null and b/code_backend_theme/static/src/img/icons/Events.png differ
diff --git a/code_backend_theme/static/src/img/icons/Expenses.png b/code_backend_theme/static/src/img/icons/Expenses.png
new file mode 100644
index 0000000..67406dd
Binary files /dev/null and b/code_backend_theme/static/src/img/icons/Expenses.png differ
diff --git a/code_backend_theme/static/src/img/icons/Fleet.png b/code_backend_theme/static/src/img/icons/Fleet.png
new file mode 100644
index 0000000..422959b
Binary files /dev/null and b/code_backend_theme/static/src/img/icons/Fleet.png differ
diff --git a/code_backend_theme/static/src/img/icons/Inventory.png b/code_backend_theme/static/src/img/icons/Inventory.png
new file mode 100644
index 0000000..5dd73dd
Binary files /dev/null and b/code_backend_theme/static/src/img/icons/Inventory.png differ
diff --git a/code_backend_theme/static/src/img/icons/Invoicing.png b/code_backend_theme/static/src/img/icons/Invoicing.png
new file mode 100644
index 0000000..9be39f5
Binary files /dev/null and b/code_backend_theme/static/src/img/icons/Invoicing.png differ
diff --git a/code_backend_theme/static/src/img/icons/Link Tracker.png b/code_backend_theme/static/src/img/icons/Link Tracker.png
new file mode 100644
index 0000000..b468d30
Binary files /dev/null and b/code_backend_theme/static/src/img/icons/Link Tracker.png differ
diff --git a/code_backend_theme/static/src/img/icons/Live Chat.png b/code_backend_theme/static/src/img/icons/Live Chat.png
new file mode 100644
index 0000000..60a44e7
Binary files /dev/null and b/code_backend_theme/static/src/img/icons/Live Chat.png differ
diff --git a/code_backend_theme/static/src/img/icons/Lunch.png b/code_backend_theme/static/src/img/icons/Lunch.png
new file mode 100644
index 0000000..d8a2e95
Binary files /dev/null and b/code_backend_theme/static/src/img/icons/Lunch.png differ
diff --git a/code_backend_theme/static/src/img/icons/Maintenance.png b/code_backend_theme/static/src/img/icons/Maintenance.png
new file mode 100644
index 0000000..a0bb8a7
Binary files /dev/null and b/code_backend_theme/static/src/img/icons/Maintenance.png differ
diff --git a/code_backend_theme/static/src/img/icons/Manufacturing.png b/code_backend_theme/static/src/img/icons/Manufacturing.png
new file mode 100644
index 0000000..4b922f9
Binary files /dev/null and b/code_backend_theme/static/src/img/icons/Manufacturing.png differ
diff --git a/code_backend_theme/static/src/img/icons/Members.png b/code_backend_theme/static/src/img/icons/Members.png
new file mode 100644
index 0000000..c538782
Binary files /dev/null and b/code_backend_theme/static/src/img/icons/Members.png differ
diff --git a/code_backend_theme/static/src/img/icons/Note.png b/code_backend_theme/static/src/img/icons/Note.png
new file mode 100644
index 0000000..329f473
Binary files /dev/null and b/code_backend_theme/static/src/img/icons/Note.png differ
diff --git a/code_backend_theme/static/src/img/icons/Point of Sale.png b/code_backend_theme/static/src/img/icons/Point of Sale.png
new file mode 100644
index 0000000..bbdb5a1
Binary files /dev/null and b/code_backend_theme/static/src/img/icons/Point of Sale.png differ
diff --git a/code_backend_theme/static/src/img/icons/Project.png b/code_backend_theme/static/src/img/icons/Project.png
new file mode 100644
index 0000000..c22fe19
Binary files /dev/null and b/code_backend_theme/static/src/img/icons/Project.png differ
diff --git a/code_backend_theme/static/src/img/icons/Purchase.png b/code_backend_theme/static/src/img/icons/Purchase.png
new file mode 100644
index 0000000..457740d
Binary files /dev/null and b/code_backend_theme/static/src/img/icons/Purchase.png differ
diff --git a/code_backend_theme/static/src/img/icons/Recruitment.png b/code_backend_theme/static/src/img/icons/Recruitment.png
new file mode 100644
index 0000000..b3a2dc7
Binary files /dev/null and b/code_backend_theme/static/src/img/icons/Recruitment.png differ
diff --git a/code_backend_theme/static/src/img/icons/Repairs.png b/code_backend_theme/static/src/img/icons/Repairs.png
new file mode 100644
index 0000000..0547711
Binary files /dev/null and b/code_backend_theme/static/src/img/icons/Repairs.png differ
diff --git a/code_backend_theme/static/src/img/icons/SMS Marketing.png b/code_backend_theme/static/src/img/icons/SMS Marketing.png
new file mode 100644
index 0000000..6b90e20
Binary files /dev/null and b/code_backend_theme/static/src/img/icons/SMS Marketing.png differ
diff --git a/code_backend_theme/static/src/img/icons/Sales.png b/code_backend_theme/static/src/img/icons/Sales.png
new file mode 100644
index 0000000..6259ec7
Binary files /dev/null and b/code_backend_theme/static/src/img/icons/Sales.png differ
diff --git a/code_backend_theme/static/src/img/icons/Surveys.png b/code_backend_theme/static/src/img/icons/Surveys.png
new file mode 100644
index 0000000..f422f46
Binary files /dev/null and b/code_backend_theme/static/src/img/icons/Surveys.png differ
diff --git a/code_backend_theme/static/src/img/icons/Time Off.png b/code_backend_theme/static/src/img/icons/Time Off.png
new file mode 100644
index 0000000..c34cde4
Binary files /dev/null and b/code_backend_theme/static/src/img/icons/Time Off.png differ
diff --git a/code_backend_theme/static/src/img/icons/Timesheets.png b/code_backend_theme/static/src/img/icons/Timesheets.png
new file mode 100644
index 0000000..3c552b3
Binary files /dev/null and b/code_backend_theme/static/src/img/icons/Timesheets.png differ
diff --git a/code_backend_theme/static/src/img/icons/Website.png b/code_backend_theme/static/src/img/icons/Website.png
new file mode 100644
index 0000000..cd10570
Binary files /dev/null and b/code_backend_theme/static/src/img/icons/Website.png differ
diff --git a/code_backend_theme/static/src/img/icons/apps.png b/code_backend_theme/static/src/img/icons/apps.png
new file mode 100644
index 0000000..ce5cf33
Binary files /dev/null and b/code_backend_theme/static/src/img/icons/apps.png differ
diff --git a/code_backend_theme/static/src/img/icons/close.png b/code_backend_theme/static/src/img/icons/close.png
new file mode 100644
index 0000000..c6ea25f
Binary files /dev/null and b/code_backend_theme/static/src/img/icons/close.png differ
diff --git a/code_backend_theme/static/src/img/icons/discuss.png b/code_backend_theme/static/src/img/icons/discuss.png
new file mode 100644
index 0000000..382b72f
Binary files /dev/null and b/code_backend_theme/static/src/img/icons/discuss.png differ
diff --git a/code_backend_theme/static/src/img/icons/eLearning.png b/code_backend_theme/static/src/img/icons/eLearning.png
new file mode 100644
index 0000000..e0cd5c2
Binary files /dev/null and b/code_backend_theme/static/src/img/icons/eLearning.png differ
diff --git a/code_backend_theme/static/src/img/icons/settings.png b/code_backend_theme/static/src/img/icons/settings.png
new file mode 100644
index 0000000..7ff68e4
Binary files /dev/null and b/code_backend_theme/static/src/img/icons/settings.png differ
diff --git a/code_backend_theme/static/src/js/chrome/sidebar.js b/code_backend_theme/static/src/js/chrome/sidebar.js
new file mode 100644
index 0000000..6825eb3
--- /dev/null
+++ b/code_backend_theme/static/src/js/chrome/sidebar.js
@@ -0,0 +1,32 @@
+/** @odoo-module **/
+
+import { Component } from "@odoo/owl";
+import { patch } from "@web/core/utils/patch";
+import { AppMenu } from "@web/webclient/app_menu/app_menu";
+
+export class SideBar extends Component {
+ setup() {
+ this.apps = this.props.menuData.children.map((app) => ({
+ actionID: parseInt(app.action.split(",")[1]),
+ menuID: app.id,
+ name: app.name,
+ xmlID: app.xmlid,
+ web_icon_data: app.web_icon_data,
+ }));
+ }
+
+ onAppClick(app) {
+ this.env.bus.trigger("APP-CLICKED", {
+ action_id: app.actionID,
+ menu_id: app.menuID,
+ });
+ }
+}
+SideBar.template = "code_backend_theme.Sidebar";
+
+// Patch AppMenu to include the sidebar
+patch(AppMenu.prototype, "code_backend_theme.Sidebar", {
+ setup() {
+ super.setup();
+ },
+});
diff --git a/code_backend_theme/static/src/js/chrome/sidebar_menu.js b/code_backend_theme/static/src/js/chrome/sidebar_menu.js
new file mode 100644
index 0000000..ea63fad
--- /dev/null
+++ b/code_backend_theme/static/src/js/chrome/sidebar_menu.js
@@ -0,0 +1,15 @@
+/** @odoo-module **/
+
+import { patch } from "@web/core/utils/patch";
+import { AppMenu } from "@web/webclient/app_menu/app_menu";
+
+patch(AppMenu.prototype, "code_backend_theme.SidebarMenu", {
+ setup() {
+ super.setup();
+ this.state = { sidebarOpen: false };
+ },
+
+ toggleSidebar() {
+ this.state.sidebarOpen = !this.state.sidebarOpen;
+ },
+});
diff --git a/code_backend_theme/static/src/js/fields/basic_fields.js b/code_backend_theme/static/src/js/fields/basic_fields.js
new file mode 100644
index 0000000..e525bf4
--- /dev/null
+++ b/code_backend_theme/static/src/js/fields/basic_fields.js
@@ -0,0 +1,57 @@
+/** @odoo-module **/
+
+import { patch } from "@web/core/utils/patch";
+import { ChartRenderer } from "@web/views/graph/chart_renderer"; // ✅ new graph renderer
+import { Chart } from "web.chartjs"; // ✅ Chart.js must be imported explicitly
+
+patch(ChartRenderer.prototype, "code_backend_theme.fields", {
+ _getBarChartConfig() {
+ const data = [];
+ const labels = [];
+ const backgroundColor = [];
+
+ this.props.data[0].values.forEach((pt) => {
+ data.push(pt.value);
+ labels.push(pt.label);
+ const color =
+ pt.type === "past"
+ ? "#ccbdc8"
+ : pt.type === "future"
+ ? "#f1b44c"
+ : "#556ee6";
+ backgroundColor.push(color);
+ });
+
+ return {
+ type: "bar",
+ data: {
+ labels,
+ datasets: [
+ {
+ data,
+ fill: "start",
+ label: this.props.data[0].key,
+ backgroundColor,
+ },
+ ],
+ },
+ options: {
+ plugins: {
+ legend: { display: false },
+ tooltip: {
+ intersect: false,
+ position: "nearest",
+ caretSize: 0,
+ },
+ },
+ scales: {
+ y: { display: false }, // ✅ new Chart.js v3+ syntax
+ },
+ maintainAspectRatio: false,
+ elements: {
+ line: { tension: 0.000001 },
+ },
+ },
+ };
+ },
+});
diff --git a/code_backend_theme/static/src/js/fields/graph.js b/code_backend_theme/static/src/js/fields/graph.js
new file mode 100644
index 0000000..64a7594
--- /dev/null
+++ b/code_backend_theme/static/src/js/fields/graph.js
@@ -0,0 +1,82 @@
+/** @odoo-module **/
+
+import { patch } from "@web/core/utils/patch";
+import { GraphRenderer } from "@web/views/graph/graph_renderer";
+import { Chart } from "web.chartjs";
+
+const MyCOLORS = [
+ "#556ee6", "#f1b44c", "#50a5f1", "#ffbb78", "#34c38f", "#98df8a", "#d62728",
+ "#ff9896", "#9467bd", "#c5b0d5", "#8c564b", "#c49c94", "#e377c2", "#f7b6d2",
+ "#7f7f7f", "#c7c7c7", "#bcbd22", "#dbdb8d", "#17becf", "#9edae5"
+];
+const MyCOLOR_NB = MyCOLORS.length;
+
+function hexToRGBA(hex, opacity) {
+ const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+ const rgb = result.slice(1, 4).map((n) => parseInt(n, 16)).join(",");
+ return `rgba(${rgb},${opacity})`;
+}
+
+patch(GraphRenderer.prototype, "code_backend_theme.graph", {
+ _getMyColor(index) {
+ return MyCOLORS[index % MyCOLOR_NB];
+ },
+
+ _renderBarChart(dataPoints) {
+ const data = this._prepareData(dataPoints);
+ data.datasets.forEach((dataset, index) => {
+ dataset.stack = this.state.stacked ? this.state.origins[dataset.originIndex] : undefined;
+ dataset.backgroundColor = this._getMyColor(index);
+ });
+
+ const options = this._prepareOptions(data.datasets.length);
+ const ctx = document.getElementById(this.chartId);
+ this.chart = new Chart(ctx, {
+ type: "bar",
+ data,
+ options,
+ });
+ },
+
+ _renderLineChart(dataPoints) {
+ const data = this._prepareData(dataPoints);
+ data.datasets.forEach((dataset, index) => {
+ if (this.state.processedGroupBy.length <= 1 && this.state.origins.length > 1) {
+ if (dataset.originIndex === 0) {
+ dataset.fill = "origin";
+ dataset.backgroundColor = hexToRGBA(MyCOLORS[0], 0.4);
+ dataset.borderColor = hexToRGBA(MyCOLORS[0], 1);
+ } else if (dataset.originIndex === 1) {
+ dataset.borderColor = hexToRGBA(MyCOLORS[1], 1);
+ } else {
+ dataset.borderColor = this._getMyColor(index);
+ }
+ } else {
+ dataset.borderColor = this._getMyColor(index);
+ }
+ if (data.labels.length === 1) {
+ dataset.data.unshift(undefined);
+ }
+ dataset.pointBackgroundColor = dataset.borderColor;
+ dataset.pointBorderColor = "rgba(0,0,0,0.2)";
+ });
+
+ if (data.datasets.length === 1) {
+ const dataset = data.datasets[0];
+ dataset.fill = "origin";
+ dataset.backgroundColor = hexToRGBA(MyCOLORS[0], 0.4);
+ }
+
+ data.labels = data.labels.length > 1
+ ? data.labels
+ : [].concat([[[""]]], data.labels, [[[""]]]);
+
+ const options = this._prepareOptions(data.datasets.length);
+ const ctx = document.getElementById(this.chartId);
+ this.chart = new Chart(ctx, {
+ type: "line",
+ data,
+ options,
+ });
+ },
+});
diff --git a/code_backend_theme/static/src/scss/datetimepicker.scss b/code_backend_theme/static/src/scss/datetimepicker.scss
new file mode 100644
index 0000000..422bc75
--- /dev/null
+++ b/code_backend_theme/static/src/scss/datetimepicker.scss
@@ -0,0 +1,92 @@
+/* SCSS Variables (assumed to be defined in the project) */
+$primary_accent: #556ee6 !default;
+$inverse_accent: #ffffff !default;
+$btn-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+
+/* Bootstrap Datepicker */
+.o-datepicker .table-sm {
+ > thead {
+ > tr > .prev {
+ color: $inverse_accent !important;
+ background-color: $primary_accent !important;
+ &:hover {
+ background-color: darken($primary_accent, 10%) !important;
+ }
+ > .fa {
+ color: $inverse_accent !important;
+ }
+ }
+ > tr > .next {
+ color: $inverse_accent !important;
+ background-color: $primary_accent !important;
+ &:hover {
+ background-color: darken($primary_accent, 10%) !important;
+ }
+ > .fa {
+ color: $inverse_accent !important;
+ }
+ }
+ > tr > .picker-switch {
+ color: $inverse_accent !important;
+ background-color: $primary_accent !important;
+ &:hover {
+ background-color: darken($primary_accent, 10%) !important;
+ }
+ }
+ }
+ > tbody > tr > td {
+ &.today::before {
+ border-bottom-color: $primary_accent !important;
+ }
+ &.active {
+ background-color: $primary_accent !important;
+ color: $inverse_accent !important;
+ }
+ }
+}
+
+.picker-switch {
+ span.fa {
+ margin: 0;
+ transition: $btn-transition;
+ &.primary {
+ background-color: $primary_accent;
+ color: $inverse_accent;
+ &:hover {
+ background-color: darken($primary_accent, 20%);
+ }
+ }
+ }
+}
+
+/* Daterangepicker */
+.daterangepicker .drp-calendar .calendar-table thead tr:first-child {
+ color: $inverse_accent;
+ background-color: $primary_accent;
+}
+
+.daterangepicker .drp-calendar .calendar-table tbody tr td:not(.off).active,
+.daterangepicker .drp-calendar .calendar-table tbody tr td:not(.off).active:hover {
+ background-color: $primary_accent;
+ color: $inverse_accent !important;
+}
+
+.daterangepicker .drp-calendar .calendar-table thead tr:first-child th.prev:hover,
+.daterangepicker .drp-calendar .calendar-table thead tr:first-child th.next:hover {
+ background-color: darken($primary_accent, 20%);
+}
+
+/* Responsive Adjustments */
+@media (max-width: 576px) {
+ .o-datepicker .table-sm {
+ font-size: 12px;
+ }
+
+ .daterangepicker .drp-calendar .calendar-table {
+ font-size: 12px;
+ }
+
+ .picker-switch {
+ font-size: 14px;
+ }
+}
\ No newline at end of file
diff --git a/code_backend_theme/static/src/scss/login.scss b/code_backend_theme/static/src/scss/login.scss
new file mode 100644
index 0000000..524313f
--- /dev/null
+++ b/code_backend_theme/static/src/scss/login.scss
@@ -0,0 +1,194 @@
+/* SCSS Variables (assumed to be defined in the project) */
+$primary_accent: #556ee6 !default;
+$secondary_accent: #334332 !default;
+$inverse_accent: #ffffff !default;
+$bg_white: #ffffff !default;
+$primary_hover: #485ec4 !default;
+
+/* Main Container */
+#wrapwrap > main {
+ background: #f8f8fb;
+}
+
+/* Navbar */
+.navbar {
+ background: $bg_white !important;
+}
+
+/* Body */
+body {
+ font-family: 'Poppins', sans-serif !important;
+}
+
+body.bg-100 {
+ background-color: #f8f8fb !important;
+}
+
+/* Database List Card */
+.card.o-database-list {
+ align-items: center;
+ max-width: 450px !important;
+}
+
+.card.o-database-list .card-body {
+ background-color: $bg_white !important;
+ border-radius: 5px !important;
+ box-shadow: 0 0.75rem 1.5rem rgba(18, 38, 63, 0.03) !important;
+ width: 450px;
+}
+
+/* Links */
+a {
+ color: $primary_accent;
+ text-decoration: none;
+}
+
+a:hover {
+ color: #4458b8;
+ text-decoration: underline;
+}
+
+/* Alerts */
+.alert-info {
+ color: #306391;
+ background-color: #dcedfc;
+ border-color: #cbe4fb;
+}
+
+/* Login Form Button Links */
+.o-login-form button.btn-link {
+ color: #495057;
+ font-weight: 500;
+ font-size: 14px !important;
+}
+
+.o-login-form button.btn-link:hover {
+ color: #171a1c;
+}
+
+/* Login Buttons */
+.btn-primary {
+ color: $inverse_accent;
+ background-color: $primary_accent;
+ border-color: $primary_accent;
+}
+
+.btn-primary:hover {
+ color: $inverse_accent;
+ background-color: $primary_hover;
+ border-color: #4458b8;
+}
+
+.btn-check:active + .btn-primary,
+.btn-check:checked + .btn-primary,
+.btn-primary.active,
+.btn-primary:active,
+.show > .btn-primary.dropdown-toggle {
+ color: $inverse_accent;
+ background-color: #4458b8 !important;
+ border-color: #4053ad !important;
+}
+
+.btn-check:focus + .btn-primary,
+.btn-primary:focus {
+ color: $inverse_accent;
+ background-color: $primary_hover !important;
+ border-color: #4458b8 !important;
+ box-shadow: 0 0 0 0.15rem rgba(111, 132, 234, 0.5) !important;
+}
+
+.o-login-form .btn {
+ display: inline-block;
+ cursor: pointer;
+ user-select: none;
+ padding: 0.47rem 0.75rem;
+ border-radius: 0.25rem;
+ transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+
+.btn-secondary {
+ color: $inverse_accent !important;
+ background-color: #74788d !important;
+ border-color: #74788d !important;
+}
+
+.btn-secondary:hover {
+ color: $inverse_accent !important;
+ background-color: #636678 !important;
+ border-color: #5d6071 !important;
+}
+
+.btn-secondary:active {
+ color: $inverse_accent;
+ background-color: #5d6071 !important;
+ border-color: #575a6a !important;
+}
+
+.btn-secondary i,
+.btn-secondary span {
+ color: $inverse_accent !important;
+}
+
+.btn-fill-secondary:focus,
+.btn-secondary:focus,
+.btn-fill-secondary.focus,
+.focus.btn-secondary {
+ box-shadow: none !important;
+}
+
+/* Input Fields */
+.o-login-form input {
+ display: block;
+ width: 100%;
+ height: 40px !important;
+ padding: 10px 20px;
+ font-size: 13px;
+ font-weight: 400;
+ line-height: 1.5;
+ color: #495057;
+ background-color: $bg_white;
+ background-clip: padding-box;
+ border: 1px solid #ced4da !important;
+ appearance: none;
+ border-radius: 0.25rem;
+ transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+ box-shadow: none !important;
+ margin-bottom: 10px !important;
+}
+
+form label {
+ font-weight: 400 !important;
+}
+
+.o-login-form a.btn.btn-secondary {
+ height: 40px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 0.35rem 0.75rem;
+}
+
+.o-login-form a.btn.btn-secondary i.fa.fa-database {
+ margin-left: 5px;
+}
+
+/* Responsive Adjustments */
+@media (max-width: 576px) {
+ .card.o-database-list {
+ max-width: 100% !important;
+ }
+
+ .card.o-database-list .card-body {
+ width: 100%;
+ }
+
+ .o-login-form input {
+ font-size: 12px;
+ padding: 8px 15px;
+ }
+
+ .o-login-form .btn {
+ padding: 0.4rem 0.6rem;
+ font-size: 12px;
+ }
+}
\ No newline at end of file
diff --git a/code_backend_theme/static/src/scss/navigation_bar.scss b/code_backend_theme/static/src/scss/navigation_bar.scss
new file mode 100644
index 0000000..1f0bbba
--- /dev/null
+++ b/code_backend_theme/static/src/scss/navigation_bar.scss
@@ -0,0 +1,376 @@
+/* SCSS Variables (assumed to be defined in the project) */
+$primary_accent: #556ee6 !default;
+$secondary_accent: #334332 !default;
+$inverse_accent: #ffffff !default;
+$o-kanban-color-border-width: 8px;
+$selected_row: #ffffff !default;
+$bg_white: #ffffff !default;
+$f_color: #555b6d !default;
+$primary_hover: #485ec4 !default;
+
+/* Form Status Bar */
+.o-form-statusbar {
+ .o-statusbar-buttons {
+ .btn {
+ margin-right: 30px !important;
+ }
+ }
+}
+
+/* Control Panel Left */
+.o-control-panel-left {
+ .btn {
+ margin-right: 10px !important;
+ }
+}
+
+/* Calendar Buttons */
+.o-calendar-buttons > button > .fa {
+ color: #ffffff !important;
+}
+
+/* Main Navbar and Primary Buttons */
+.o-main-navbar, .btn-primary, .btn-primary:active, .o-searchview-facet-label {
+ background-color: $primary_accent !important;
+ color: $inverse_accent !important;
+}
+
+.o-search-panel-section-icon {
+ color: $primary_accent !important;
+}
+
+.btn-secondary {
+ border-radius: 0;
+ border: solid 1px $primary_accent !important;
+ color: $primary_accent !important;
+}
+
+/* List View Table */
+.o-list-view .o-list-table thead {
+ position: sticky;
+ top: 0;
+ z-index: 999;
+ background-color: #eeeeee !important;
+}
+
+.o-list-view .table-responsive .table {
+ width: max-content !important;
+ min-width: 100%;
+}
+
+.o-list-view .table-responsive .table thead tr:nth-child(1) th {
+ position: sticky;
+ top: 0;
+ z-index: 999;
+ background-color: #eeeeee !important;
+}
+
+.o-list-view .o-list-table tbody {
+ position: initial !important;
+}
+
+.o-list-view .table-responsive .table thead {
+ z-index: 1;
+}
+
+.o-optional-columns-dropdown-toggle {
+ z-index: 999;
+}
+
+/* Breadcrumb and Menu Items */
+.breadcrumb-item > a, .o-menu-item > a {
+ color: $primary_accent !important;
+}
+
+.fa-trash {
+ color: #f46a6a !important;
+}
+
+/* Navbar Hover States */
+.o-main-navbar > a:hover {
+ background-color: lighten($primary_accent, 10%) !important;
+}
+
+.o-main-navbar > .o-menu-sections > li > a:hover,
+.o-main-navbar > .o-menu-systray > li > a:hover,
+.o-main-navbar > .o-menu-sections > li.show > a,
+.o-main-navbar > .o-menu-systray > li.show > a {
+ background-color: lighten($primary_accent, 10%) !important;
+}
+
+.o-main-navbar > .o-menu-apps > li > a:hover,
+.o-main-navbar > .o-menu-apps > li > a:active {
+ background-color: lighten($primary_accent, 10%) !important;
+}
+
+.o-main-navbar > .o-menu-apps > .dropdown.show > .dropdown-menu.show {
+ max-height: 100vh !important;
+ height: 93vh !important;
+}
+
+/* Discuss Sidebar */
+.o-mail-discuss-sidebar {
+ background-color: #1c2833;
+}
+
+/* Dropdown Toggle */
+.dropdown-toggle::after {
+ background-color: transparent !important;
+}
+
+.o-external-button {
+ border: none !important;
+}
+
+.o-field-x2many-list-row-add > a {
+ color: $primary_accent !important;
+}
+
+.nav-item > a {
+ color: $primary_accent !important;
+}
+
+.o-main-navbar > .o-menu-apps > li > a > i {
+ color: $inverse_accent !important;
+ font-size: 16px !important;
+}
+
+.o-form-uri > span {
+ color: $primary_accent !important;
+}
+
+/* Input Fields */
+.o-required-modifier.o-input,
+.o-required-modifier .o-input,
+.o-required-modifier > .o-input-dropdown > .ui-autocomplete-input,
+.o-datepicker.o-field-date.o-field-widget.o-required-modifier > input {
+ background-color: $inverse_accent !important;
+ color: $primary_accent !important;
+ border-left: solid 3px #f46a6a !important;
+}
+
+.o-input {
+ border: solid 1px $primary_accent !important;
+ color: $primary_accent !important;
+}
+
+.o-no-caret > i, button[aria-pressed="true"] {
+ color: $inverse_accent !important;
+}
+
+.o-loading {
+ background-color: $primary_accent;
+}
+
+.fas {
+ color: $inverse_accent !important;
+}
+
+.dashboard-mainbar {
+ width: 100%;
+}
+
+.a-app-menu-title {
+ display: none;
+}
+
+.o-menu-apps > .dropdown.show > .dropdown-menu.show:hover .a-app-menu-title {
+ display: inline-block;
+ width: 200px;
+}
+
+.ui-state-active {
+ background-color: $primary_accent !important;
+ color: $inverse_accent !important;
+}
+
+.oe-search-bgnd {
+ background-color: lighten($primary_accent, 20%) !important;
+ color: $inverse_accent !important;
+}
+
+.oe-search-tab {
+ background-color: $primary_accent !important;
+ color: $inverse_accent !important;
+}
+
+.o-horizontal-separator {
+ color: $primary_accent !important;
+}
+
+.o-field-widget.o-field-image .o-form-image-controls {
+ background-color: $primary_accent !important;
+}
+
+.o-field-widget.o-field-image .o-form-image-controls > button {
+ color: $inverse_accent !important;
+}
+
+.dropdown-item.o-app.mt0:hover,
+.dropdown-item.o-app.mt0:hover > .a-app-menu-title {
+ background-color: $primary_accent !important;
+ color: $inverse_accent !important;
+}
+
+div.o-boolean-toggle.custom-control.custom-checkbox > input.custom-control-input:checked + label.custom-control-label::before {
+ background-color: $primary_accent !important;
+}
+
+.o-mail-systray-item .o-mail-systray-dropdown .o-filter-button.active {
+ color: $primary_accent;
+ text-decoration: none;
+}
+
+.o-mail-user-status.o-user-online {
+ color: #fff !important;
+}
+
+.o-form-view .o-form-statusbar > .o-statusbar-status > .o-arrow-button.btn-primary.disabled::after {
+ border-left-color: $primary_accent;
+}
+
+.btn-link {
+ font-weight: 400;
+ color: $primary_accent !important;
+ text-decoration: none;
+}
+
+.o-thread-window-header {
+ background-color: $primary_accent !important;
+}
+
+.o-thread-window-close, .o-thread-window-expand {
+ color: $inverse_accent !important;
+}
+
+.o-menu-sections, .o-menu-systray, .o-web-client > header {
+ background: $primary_accent !important;
+}
+
+.fa-building-o {
+ color: white !important;
+}
+
+/* Button Styling */
+.o-button-import, .oe-import-file {
+ background: #5aa29f !important;
+ color: white !important;
+ border: solid 2px #5aa29f !important;
+}
+
+.o-button-import:hover, .oe-import-file:hover,
+.o-button-import:active, .oe-import-file:active {
+ background: white !important;
+ color: #5aa29f !important;
+ border: solid 2px #5aa29f !important;
+}
+
+.o-form-button-save, .o-form-button-edit {
+ background: #7BA94F !important;
+ color: white !important;
+ border: solid 2px #7BA94F !important;
+}
+
+.o-form-button-save:hover, .o-form-button-edit:hover,
+.o-form-button-save:active, .o-form-button-edit:active {
+ background: white !important;
+ color: #7BA94F !important;
+ border: solid 2px #7BA94F !important;
+}
+
+.o-kanban-button-new, .o-list-button-add, .o-form-button-create {
+ background: #b9408d !important;
+ color: white !important;
+ border: solid 2px #b9408d !important;
+}
+
+.o-kanban-button-new:hover, .o-list-button-add:hover, .o-form-button-create:hover,
+.o-kanban-button-new:active, .o-list-button-add:active, .o-form-button-create:active {
+ background: white !important;
+ color: #b9408d !important;
+ border: solid 2px #b9408d !important;
+}
+
+.o-form-button-cancel, .o-import-cancel {
+ background: #cf4137 !important;
+ color: white !important;
+ border: solid 2px #cf4137 !important;
+}
+
+.o-form-button-cancel:hover, .o-import-cancel:hover,
+.o-form-button-cancel:active, .o-import-cancel:active {
+ background: white !important;
+ color: #cf4137 !important;
+ border: solid 2px #cf4137 !important;
+}
+
+.report-button {
+ border-radius: 0 !important;
+ border: solid 2px $primary_accent !important;
+ background: $primary_accent !important;
+}
+
+.report-button:hover, .report-button:active {
+ border-radius: 0 !important;
+ border: solid 2px $primary_accent !important;
+ color: $primary_accent !important;
+ background: $inverse_accent !important;
+}
+
+.btn-primary {
+ border-radius: 0 !important;
+}
+
+/* Navigation Tabs */
+.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
+ border: none;
+ border-bottom: solid;
+ font-weight: bold;
+}
+
+.nav-link:hover, .nav-link:focus {
+ border: none;
+}
+
+/* Selected Rows */
+.o-data-row:has(.custom-control-input:checked) {
+ background: #E5E3F3 !important;
+}
+
+/* One2Many List View */
+.o-field-one2many .o-list-view .table-responsive {
+ max-height: 50vh;
+}
+
+/* Progress Bar */
+.o-progressbar .o-progress .o-progressbar-complete {
+ background-color: #3d9bbb;
+}
+
+/* Responsive Adjustments */
+@media (max-width: 992px) {
+ .o-main-navbar {
+ flex-wrap: wrap;
+ justify-content: flex-end;
+ height: auto;
+ }
+
+ .o-menu-systray {
+ margin-left: auto;
+ }
+}
+
+@media (max-width: 480px) {
+ .o-control-panel-left .btn {
+ margin-right: 5px !important;
+ }
+
+ .o-form-statusbar {
+ flex-wrap: wrap;
+ }
+
+ .o-main-navbar > .o-menu-apps > .dropdown.show > .dropdown-menu.show {
+ height: auto !important;
+ max-height: 80vh !important;
+ }
+}
\ No newline at end of file
diff --git a/code_backend_theme/static/src/scss/sidebar.scss b/code_backend_theme/static/src/scss/sidebar.scss
new file mode 100644
index 0000000..57dfc94
--- /dev/null
+++ b/code_backend_theme/static/src/scss/sidebar.scss
@@ -0,0 +1,139 @@
+/* Sidebar Panel */
+#sidebar-panel {
+ height: 100%;
+ position: fixed;
+ top: 0;
+ background-color: #2a3042;
+ display: none;
+ width: 200px;
+ overflow-y: auto;
+ scrollbar-width: none; /* Hide scrollbar for Firefox */
+ z-index: 999;
+}
+
+#sidebar-panel::-webkit-scrollbar {
+ display: none; /* Hide scrollbar for Chrome, Safari, and Opera */
+}
+
+.sidebar-panel .sidebar {
+ padding: 0;
+ white-space: nowrap;
+ padding-bottom: 20px;
+ padding-top: 5px;
+}
+
+.sidebar-panel .sidebar-close {
+ text-align: end;
+ display: none;
+ position: sticky;
+ height: 35px;
+ padding-top: 5px;
+ top: 0;
+ background: #2a3042;
+ z-index: 1;
+}
+
+.sidebar-panel .sidebar-close a#closeSidebar {
+ font-size: 18px;
+ margin-right: 10px;
+ color: #ffffff;
+ opacity: 0.3;
+}
+
+.sidebar-panel .sidebar-close a#closeSidebar img {
+ width: 15px;
+}
+
+.sidebar-panel .sidebar .sidebar-logo {
+ padding-top: 20px;
+ text-align: center;
+ padding-bottom: 20px;
+}
+
+.sidebar-panel .sidebar .sidebar-logo img {
+ max-width: 150px;
+}
+
+.sidebar-panel .sidebar .sidebar-head {
+ padding-top: 20px;
+ padding-left: 15px;
+ color: #6a7187;
+ font-size: 14px;
+}
+
+.sidebar-panel .sidebar .sidebar-menu {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+
+.sidebar-panel .sidebar .sidebar-menu li {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ display: block;
+}
+
+.sidebar-panel .sidebar .sidebar-menu li a {
+ margin: 0;
+ border: 0;
+ display: block;
+ cursor: pointer;
+ overflow: hidden;
+ padding: 8px 10px 8px 25px;
+ color: #ffffff;
+ font-size: 13px;
+ transition: all 0.3s;
+}
+
+.sidebar-panel .sidebar .sidebar-menu li:hover a {
+ background: #1e2230;
+ color: #fff;
+}
+
+.sidebar-panel .nav-link {
+ opacity: 0.5;
+ transition: all 0.3s;
+}
+
+.sidebar-panel .sidebar a.nav-link.active {
+ color: #fff !important;
+ opacity: 1;
+}
+
+.sidebar-panel .sidebar .sidebar-menu li a .sidebar-img {
+ width: 20px;
+ margin-right: 8px;
+}
+
+/* Responsive Adjustments for Odoo 18 */
+@media (max-width: 992px) {
+ #sidebar-panel {
+ width: 100%;
+ z-index: 1000;
+ display: none; /* Hidden by default, toggled via JS in Odoo 18 */
+ }
+
+ .sidebar-panel .sidebar-close {
+ display: block;
+ }
+
+ .o-web-client.sidebar-open #sidebar-panel {
+ display: block; /* Show sidebar when toggled */
+ }
+}
+
+@media (max-width: 480px) {
+ #sidebar-panel {
+ width: 100%;
+ }
+
+ .sidebar-panel .sidebar .sidebar-logo img {
+ max-width: 120px;
+ }
+
+ .sidebar-panel .sidebar .sidebar-menu li a {
+ padding: 8px 10px 8px 15px;
+ font-size: 12px;
+ }
+}
\ No newline at end of file
diff --git a/code_backend_theme/static/src/scss/theme.scss b/code_backend_theme/static/src/scss/theme.scss
new file mode 100644
index 0000000..119fbd1
--- /dev/null
+++ b/code_backend_theme/static/src/scss/theme.scss
@@ -0,0 +1,792 @@
+/* Defining SCSS variables (assumed to be available in the project) */
+$primary_accent: #556ee6 !default;
+$secondary_accent: #334332 !default;
+$inverse_accent: #ffffff !default;
+$o-kanban-color-border-width: 8px;
+$selected_row: #ffffff !default;
+$bg_white: #ffffff !default;
+$f_color: #555b6d !default;
+$primary_hover: #485ec4 !default;
+
+/* General Body Styling */
+body {
+ font-family: 'Poppins', sans-serif !important;
+ background-color: #f8f8fb;
+}
+
+a {
+ color: $primary_accent;
+}
+
+a:hover {
+ color: $primary_hover;
+}
+
+a.btn {
+ height: auto !important;
+}
+
+/* Top Bar (Updated for Odoo 18) */
+.o-main-navbar, .o-searchview-facet-label {
+ background-color: transparent !important;
+ color: $f_color !important;
+ border: none !important;
+}
+
+.o-menu-sections, .o-menu-systray, .o-web-client > header {
+ background: $bg_white !important;
+}
+
+.o-user-menu-name {
+ color: $f_color !important;
+}
+
+.o-main-navbar > .o-menu-apps > li > a > i {
+ color: $f_color !important;
+ font-size: 16px !important;
+}
+
+.o-main-navbar {
+ height: 65px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ border-bottom: none !important;
+ box-shadow: 0 0.75rem 1.5rem rgba(18, 38, 63, 0.03) !important;
+ background-color: #fff !important;
+}
+
+.top-heading {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.top-heading ul {
+ margin-bottom: 0 !important;
+}
+
+.top-heading > a {
+ margin-left: 10px;
+ font-size: 20px;
+}
+
+.top-heading li {
+ list-style: none;
+}
+
+.o-no-caret > i, button[aria-pressed="true"] {
+ color: $f_color !important;
+}
+
+.o-main-navbar > ul > li > a, .o-main-navbar > ul > li > label {
+ height: 46px;
+ padding: 0 5px;
+ color: $f_color !important;
+ line-height: 46px;
+}
+
+.o-main-navbar > .o-menu-sections > li > a:hover,
+.o-main-navbar > .o-menu-systray > li > a:hover,
+.o-main-navbar > .o-menu-sections > li.show > a,
+.o-main-navbar > .o-menu-systray > li.show > a {
+ background-color: $bg_white !important;
+}
+
+.topbar-icon .fa {
+ color: #555b6d !important;
+ font-size: 20px !important;
+}
+
+.o-main-navbar .o-user-menu .o-user-avatar {
+ height: 35px;
+ width: 35px;
+}
+
+.o-messaging-menu-counter {
+ background-color: #556ee6;
+ color: #fff !important;
+}
+
+.o-mail-systray-item .o-notification-counter {
+ background: #556ee6 !important;
+}
+
+.o-control-panel {
+ background: #f8f8fb !important;
+ border: none !important;
+ margin: 15px 15px 0 15px;
+ background-color: #ffffff !important;
+ box-shadow: 0 0.75rem 1.5rem rgba(18, 38, 63, 0.03) !important;
+ border-radius: 5px;
+}
+
+.o-searchview {
+ border: 1px solid #ddd;
+ height: 38px;
+ padding-left: 12px;
+ padding-right: 20px;
+ box-shadow: none;
+ border-radius: 5px;
+ padding-top: 6px;
+}
+
+.o-searchview .o-searchview-icon {
+ position: absolute;
+ top: 11px;
+ right: 8px;
+}
+
+.o-searchview .o-searchview-facet {
+ border: 1px solid #ddd;
+ background: #f8f8fb;
+ border-radius: 10px;
+ padding: 0 4px;
+}
+
+.o-control-panel-bottom-right span.o-dropdown-title {
+ color: #555b6d;
+}
+
+.o-control-panel-bottom-left .o-form-button-cancel {
+ margin-right: 5px !important;
+ padding: 6px 8px !important;
+ color: #fff !important;
+ background-color: #f46a6a !important;
+ border-color: #f46a6a !important;
+}
+
+.o-control-panel-bottom-left .o-form-button-cancel:hover {
+ background-color: #cf5a5a !important;
+ border-color: #c35555 !important;
+}
+
+.o-form-view, .o-widget-discuss {
+ background: #f8f8fb;
+}
+
+.o-form-view .o-form-statusbar > .o-statusbar-buttons .btn {
+ margin-right: 15px !important;
+}
+
+.o-form-view .o-form-statusbar > .o-statusbar-status > .o-arrow-button:not(:first-child)::before,
+.o-form-view .o-form-statusbar > .o-statusbar-status > .o-arrow-button:not(:first-child)::after {
+ border-top: 21px solid transparent !important;
+ border-bottom: 17px solid transparent !important;
+}
+
+.o-form-view .o-form-statusbar > .o-statusbar-status > .o-arrow-button:not(:first-child)::before {
+ right: -11px;
+ border-left-color: $primary_accent;
+}
+
+/* Buttons */
+.btn {
+ display: inline-block;
+ font-weight: 400 !important;
+ line-height: 1.5 !important;
+ color: #495057;
+ text-align: center;
+ vertical-align: middle;
+ cursor: pointer;
+ user-select: none;
+ background-color: transparent;
+ border: 1px solid transparent;
+ padding: 6px 15px !important;
+ border-radius: 4px !important;
+ transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+ height: 40px !important;
+ margin-bottom: 2px;
+}
+
+.btn-primary {
+ color: #fff !important;
+ background-color: $primary_accent !important;
+ border-color: $primary_accent !important;
+}
+
+.btn-primary:hover {
+ color: #fff !important;
+ background-color: $primary_hover !important;
+ border-color: #4458b8 !important;
+}
+
+.btn-primary:active {
+ color: #fff !important;
+ background-color: #4458b8 !important;
+ border-color: #4053ad !important;
+}
+
+.btn-check:focus + .btn-primary, .btn-primary:focus {
+ color: #fff;
+ background-color: #485ec4 !important;
+ border-color: #4458b8 !important;
+ box-shadow: 0 0 0 0.15rem rgba(111, 132, 234, 0.5) !important;
+}
+
+.btn-primary i, .btn-primary span {
+ color: #fff !important;
+}
+
+.btn-secondary {
+ color: #fff !important;
+ background-color: #74788d !important;
+ border-color: #74788d !important;
+}
+
+.btn-secondary:hover {
+ color: #fff !important;
+ background-color: #636678 !important;
+ border-color: #5d6071 !important;
+}
+
+.btn-secondary:active {
+ color: #fff;
+ background-color: #5d6071 !important;
+ border-color: #575a6a !important;
+}
+
+.btn-check:focus + .btn-secondary, .btn-secondary:focus {
+ color: #fff;
+ background-color: #636678 !important;
+ border-color: #5d6071 !important;
+ box-shadow: 0 0 0 0.15rem rgba(137, 140, 158, 0.5) !important;
+}
+
+.btn-secondary i, .btn-secondary span {
+ color: #fff !important;
+}
+
+.btn-info {
+ color: #fff !important;
+ background-color: #50a5f1 !important;
+ border-color: #50a5f1 !important;
+}
+
+.btn-info:hover {
+ color: #fff !important;
+ background-color: #448ccd !important;
+ border-color: #4084c1 !important;
+}
+
+button[name="action_cancel"],
+button[name="button_cancel"],
+button[special="cancel"] {
+ color: #fff !important;
+ background-color: #f46a6a !important;
+ border-color: #f46a6a !important;
+}
+
+button[name="action_cancel"]:hover,
+button[name="button_cancel"]:hover,
+button[special="cancel"]:hover {
+ background-color: #cf5a5a !important;
+ border-color: #c35555 !important;
+}
+
+button[name="action_cancel"]:active,
+button[name="button_cancel"]:active,
+button[special="cancel"]:active {
+ color: #fff !important;
+ background-color: #c35555 !important;
+ border-color: #b75050 !important;
+}
+
+button[name="action_cancel"]:focus,
+button[name="button_cancel"]:focus,
+button[special="cancel"]:focus {
+ color: #fff !important;
+ background-color: #cf5a5a !important;
+ border-color: #c35555 !important;
+ box-shadow: 0 0 0 0.15rem rgba(246, 128, 128, 0.5) !important;
+}
+
+button[name="update_module"] {
+ margin-right: 2px;
+}
+
+.btn-warning,
+button[name="action_uninstall"] {
+ color: #fff !important;
+ background-color: #f1b44c !important;
+ border-color: #f1b44c !important;
+}
+
+.btn-warning:hover,
+button[name="action_uninstall"]:hover {
+ color: #fff !important;
+ background-color: #cd9941 !important;
+ border-color: #c1903d !important;
+}
+
+.btn-warning:active,
+button[name="action_uninstall"]:active {
+ color: #fff !important;
+ background-color: #c1903d !important;
+ border-color: #b58739 !important;
+}
+
+.btn-warning:focus,
+button[name="action_uninstall"]:focus {
+ color: #fff !important;
+ background-color: #cd9941 !important;
+ border-color: #c1903d !important;
+ box-shadow: 0 0 0 0.15rem rgba(243, 191, 103, 0.5) !important;
+}
+
+.o-statusbar-status .o-arrow-button.btn-secondary {
+ border: solid 1px #556ee6 !important;
+ color: #556ee6 !important;
+ background-color: #fff !important;
+}
+
+.o-statusbar-status .o-arrow-button.btn-secondary:hover::after {
+ border-color: #fff !important;
+}
+
+.o-statusbar-status .o-arrow-button.btn-primary {
+ border: solid 1px #556ee6 !important;
+ color: #fff !important;
+}
+
+.o-control-panel-bottom-right .btn-secondary {
+ background: #fff;
+ border-color: #dddddd !important;
+ margin-right: 5px !important;
+ padding: 6px 8px !important;
+}
+
+.o-control-panel-bottom-left .o-form-button-create {
+ color: #fff !important;
+ background-color: #74788d !important;
+ border-color: #74788d !important;
+ padding: 5px 15px !important;
+}
+
+.o-web-settings-invite {
+ margin-left: 7px;
+ position: relative;
+ top: -1px;
+}
+
+.o-form-view .oe-button-box .btn.oe-stat-button {
+ height: 44px !important;
+ opacity: 1 !important;
+ border-radius: 0 !important;
+}
+
+.oe-module-action .btn {
+ height: auto !important;
+}
+
+.o-control-panel-buttons a.btn {
+ display: flex !important;
+ align-items: center;
+}
+
+button.fa.fa-external-link.btn.btn-secondary.o-external-button {
+ padding: 2px !important;
+ color: #74788d !important;
+ background: none !important;
+}
+
+.o-statusbar-status.o-field-widget.o-readonly-modifier .btn {
+ margin-right: 0 !important;
+}
+
+.btn-group .btn {
+ margin-right: 3px;
+}
+
+.o-composer-action-button.o-last.o-has-current-partner-avatar.o-composer-is-compact {
+ height: 48px !important;
+ border-bottom-left-radius: 0 !important;
+ border-top-left-radius: 0 !important;
+}
+
+.oe-right .btn {
+ margin-left: 2px;
+}
+
+/* Tables */
+.table-sm th, .table-sm td {
+ padding: 0.5rem;
+}
+
+tr.o-data-row {
+ font-size: 15px;
+}
+
+.o-list-view .table-responsive .table thead tr:nth-child(1) th {
+ position: sticky;
+ top: 0;
+ z-index: 999;
+ background-color: #ffffff !important;
+}
+
+th.o-list-record-selector {
+ color: #495057 !important;
+ border-color: #eff2f7 !important;
+ background-color: #f8f9fa !important;
+}
+
+.table > :not(caption) > * > * {
+ padding: 1rem;
+ background-color: var(--bs-table-bg);
+ border-bottom-width: 1px;
+ box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
+}
+
+.o-list-view .o-list-table thead > tr > th:not(.o-list-record-selector).o-list-number-th {
+ text-align: left !important;
+}
+
+.o-list-view .o-list-table thead > tr > th:not(.o-list-record-selector) {
+ border-left: none !important;
+}
+
+.table thead th {
+ vertical-align: bottom;
+ border-bottom: none;
+}
+
+.table th {
+ border-top: 1px solid #fff !important;
+}
+
+.o-list-view .o-list-table tfoot {
+ background-color: #fff !important;
+}
+
+.o-list-view .table-responsive .o-list-table tfoot tr:nth-child(1) td {
+ background-color: #fff !important;
+}
+
+.o-list-view .o-list-table tr:focus-within,
+.o-list-view .o-list-table.table-striped tr:focus-within {
+ background-color: #fff !important;
+}
+
+/* Checkbox */
+.custom-checkbox label {
+ position: relative;
+ cursor: pointer;
+}
+
+.custom-checkbox label::before {
+ content: '';
+ appearance: none;
+ background-color: transparent;
+ border: 1px solid #0079bf;
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0 -15px 10px -12px rgba(0, 0, 0, 0.05);
+ padding: 10px;
+ display: inline-block;
+ position: relative;
+ vertical-align: middle;
+ cursor: pointer;
+ margin-right: 5px;
+ margin-top: 0;
+}
+
+.custom-checkbox input:checked + label::after {
+ content: '';
+ display: block;
+ position: absolute;
+ top: 1px;
+ left: 9px;
+ width: 6px;
+ height: 14px;
+ border: solid #fff;
+ border-width: 0 2px 2px 0;
+ transform: rotate(45deg);
+}
+
+.custom-control-label::before {
+ position: absolute;
+ top: 0 !important;
+ left: 1px !important;
+ display: block;
+ width: 1rem;
+ height: 1rem;
+ pointer-events: none;
+ content: "";
+ background-color: #fff;
+ border: 1px solid rgba(0, 0, 0, 0.25) !important;
+ box-shadow: none !important;
+ border-radius: 5px !important;
+ margin-top: -5px;
+}
+
+.custom-checkbox {
+ padding-left: 0 !important;
+}
+
+.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before {
+ background-color: $primary_accent;
+}
+
+.dropdown-item .custom-checkbox input:checked + label::after {
+ content: '';
+ display: block;
+ position: absolute;
+ top: 1px;
+ left: 19px;
+ width: 6px;
+ height: 14px;
+ border: solid #fff;
+ border-width: 0 2px 2px 0;
+ transform: rotate(45deg);
+}
+
+.custom-control-input:checked ~ .custom-control-label::before {
+ color: #fff;
+ background-color: #556ee6;
+ border-color: #556ee6;
+}
+
+.custom-control.custom-checkbox .custom-control-input:not(:checked):not(:indeterminate) ~ .custom-control-label::before {
+ background: none;
+ outline: none !important;
+}
+
+.o-list-selection-box {
+ display: inline-block;
+ padding: 0.375rem 0.75rem;
+ vertical-align: middle;
+ border: 1px solid rgba(85, 110, 230, 0.25) !important;
+ background-color: rgba(85, 110, 230, 0.25) !important;
+ color: $primary_accent !important;
+ border-radius: 5px;
+}
+
+.o-radio-input + .custom-control-label::before {
+ position: absolute !important;
+ top: 8.5px !important;
+ left: -1.5rem !important;
+ display: block !important;
+ width: 1rem !important;
+ height: 1rem !important;
+ pointer-events: none !important;
+ content: "" !important;
+ background-color: #fff !important;
+ border: #adb5bd solid 1px !important;
+}
+
+.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
+ background: $primary_accent !important;
+ border-radius: 30px;
+}
+
+/* Form Sheet */
+.o-form-view .o-form-sheet-bg {
+ border-bottom: none;
+ background: #fff !important;
+ box-shadow: none !important;
+ border-radius: 5px;
+ padding: 10px;
+}
+
+.o-form-view .o-form-sheet-bg > .o-form-sheet {
+ min-width: 650px;
+ max-width: initial;
+ min-height: 330px;
+ border: 1px solid #c8c8d3;
+ box-shadow: none !important;
+ background: #fff;
+ margin: 4.8px auto;
+ padding: 24px 16px;
+ border-radius: 5px;
+}
+
+.o-form-view .o-form-statusbar {
+ position: relative;
+ display: flex;
+ justify-content: space-between;
+ padding-left: 5px;
+ border-bottom: none !important;
+ background-color: #fff;
+ border-radius: 5px;
+}
+
+.o-required-modifier > .o-input-dropdown > .ui-autocomplete-input {
+ border-left: solid 3px #f46a6a !important;
+}
+
+/* Discuss */
+.o-discuss {
+ padding: 15px !important;
+ background: #f5f5f9 !important;
+}
+
+.o-discuss .o-discuss-sidebar {
+ background-color: #fff !important;
+ color: #dee2e6 !important;
+ border-radius: 5px;
+ margin-right: 10px !important;
+ box-shadow: 0 0.75rem 1.5rem rgba(18, 38, 63, 0.03) !important;
+}
+
+.o-discuss-sidebar-item.o-active {
+ color: #f46a6a !important;
+ font-weight: 500 !important;
+}
+
+.o-discuss-sidebar-item:hover {
+ background: none !important;
+}
+
+.o-discuss-sidebar-item {
+ cursor: pointer !important;
+ color: #74788d !important;
+ line-height: 24px !important;
+ padding: 10px 5px !important;
+}
+
+.o-discuss-sidebar-item-active-indicator.o-item-active {
+ background: none !important;
+}
+
+.o-discuss-sidebar-item.o-active .fa {
+ color: #f46a6a !important;
+}
+
+.o-widget-discuss .o-discuss-content {
+ border-top: none !important;
+ background-color: #fff !important;
+ border-radius: 5px;
+ box-shadow: 0 0.75rem 1.5rem rgba(18, 38, 63, 0.03) !important;
+}
+
+.o-discuss-sidebar-item-counter {
+ background-color: #f46a6a !important;
+ color: #fff !important;
+}
+
+.o-thread-icon-online {
+ color: #34c38f;
+}
+
+.o-message-pretty-body table th {
+ color: $primary_accent !important;
+}
+
+.o-message-pretty-body table thead tr td {
+ background-color: $primary_hover !important;
+}
+
+/* Responsive */
+@media (max-width: 992px) {
+ .o-action-manager.sidebar-margin {
+ margin: 0 !important;
+ }
+ .top-heading.sidebar-margin {
+ margin: 0 !important;
+ }
+ .sidebar-panel .sidebar {
+ position: relative;
+ padding-top: 0 !important;
+ }
+ .sidebar-panel .sidebar-close {
+ display: block !important;
+ }
+}
+
+@media (max-width: 480px) {
+ ul.o-menu-apps {
+ padding-left: 25px;
+ }
+ .o-control-panel {
+ margin: 15px 10px 0 10px;
+ }
+ .o-control-panel > div {
+ flex-wrap: wrap;
+ }
+ .o-control-panel-top-left, .o-control-panel-top-right,
+ .o-control-panel-bottom-left, .o-control-panel-bottom-right {
+ width: 100%;
+ }
+ .o-widget-discuss .o-discuss.o-mobile:not(.o-adding-item) {
+ border: none !important;
+ }
+ html .o-web-client > .o-action-manager {
+ overflow: auto !important;
+ }
+ ul.o-menu-systray.topbar-icon li:nth-child(1) {
+ margin-left: 20px;
+ }
+ .o-main-navbar .o-user-menu {
+ margin-left: 20px;
+ }
+ .sidebar-panel .sidebar .sidebar-logo img {
+ max-width: 112px;
+ }
+ .sidebar-panel .sidebar .sidebar-logo {
+ padding-top: 20px;
+ text-align: center;
+ padding-bottom: 5px;
+ }
+ li.o-switch-company-menu.show .dropdown-menu.dropdown-menu-right.show {
+ right: auto !important;
+ left: 0;
+ }
+ ul.o-menu-systray.topbar-icon .dropdown-menu.show {
+ left: 0 !important;
+ right: auto !important;
+ }
+ ul.o-menu-systray.topbar-icon {
+ margin-left: 0;
+ }
+ .o-messaging-menu-dropdown-menu.o-mobile {
+ top: 70px;
+ }
+ .o-control-panel .o-control-panel-bottom-right {
+ flex-wrap: wrap;
+ }
+ .o-form-view .o-form-statusbar {
+ flex-wrap: wrap;
+ }
+ .btn {
+ padding: 2px 10px !important;
+ height: 35px !important;
+ }
+ .o-form-view .o-form-statusbar > .o-statusbar-status > .o-arrow-button:not(:first-child)::before,
+ .o-form-view .o-form-statusbar > .o-statusbar-status > .o-arrow-button:not(:first-child)::after {
+ border-top: 17px solid transparent !important;
+ border-bottom: 16px solid transparent !important;
+ }
+ .o-statusbar-status.o-field-widget.o-readonly-modifier {
+ width: 100%;
+ justify-content: flex-end;
+ margin-top: 5px;
+ }
+ .o-form-view .o-form-statusbar > .o-statusbar-buttons > .btn {
+ margin: 1px 0 4px 0;
+ }
+ .o-form-statusbar .o-statusbar-buttons .btn {
+ margin-right: 5px !important;
+ }
+ .o-control-panel .o-control-panel-bottom-left > .o-control-panel-action-menus .o-dropdown-toggler-btn {
+ margin-right: 3px;
+ }
+ .o-form-view .o-form-sheet-bg > .o-form-sheet {
+ min-width: auto;
+ }
+ .nav-tabs .nav-link {
+ padding: 8px;
+ }
+ .modal.o-technical-modal.o-modal-full .modal-dialog .modal-content .modal-header {
+ background: $primary_accent;
+ }
+ .o-form-view .o-group .o-group-col-6 {
+ width: 100%;
+ }
+ .o-kanban-view.o-kanban-ungrouped .o-kanban-record {
+ flex-wrap: wrap;
+ }
+ .o-kanban-view .o-kanban-record.o-kanban-record-has-image-fill .o-kanban-image-fill-left {
+ border-radius: 5px;
+ }
+ .o-field-widget.o-field-image .o-form-image-controls > .fa.o-select-file-button {
+ background: #74788d;
+ }
+}
\ No newline at end of file
diff --git a/code_backend_theme/static/src/scss/theme_accent.scss b/code_backend_theme/static/src/scss/theme_accent.scss
new file mode 100644
index 0000000..0ed3784
--- /dev/null
+++ b/code_backend_theme/static/src/scss/theme_accent.scss
@@ -0,0 +1,79 @@
+/* ================================
+ Root CSS Variables (v18 standard)
+ ================================ */
+:root {
+ /* Primary color scheme */
+ --o-color-primary: #556ee6;
+ --o-color-secondary: #334332;
+ --o-color-inverse: #ffffff;
+
+ /* Kanban specific */
+ --o-kanban-border-width: 8px;
+ --o-kanban-selected-background: #f5f7fa; /* subtle gray instead of pure white */
+
+ /* Background and text */
+ --o-color-background: #ffffff;
+ --o-color-text-primary: #555b6d;
+ --o-color-primary-hover: #485ec4;
+
+ /* Aliases for compatibility */
+ --o-main-color-muted: var(--o-color-text-primary);
+ --o-brand-primary: var(--o-color-primary);
+ --o-brand-secondary: var(--o-color-secondary);
+}
+
+/* ================================
+ SCSS Variable Mappings (optional)
+ ================================ */
+$o-color-primary: var(--o-color-primary) !default;
+$o-color-secondary: var(--o-color-secondary) !default;
+$o-color-inverse: var(--o-color-inverse) !default;
+$o-kanban-border-width: var(--o-kanban-border-width) !default;
+$o-selected-row-bg: var(--o-kanban-selected-background) !default;
+$o-background: var(--o-color-background) !default;
+$o-text-color-primary: var(--o-color-text-primary) !default;
+$o-primary-hover: var(--o-color-primary-hover) !default;
+
+/* ================================
+ Component Styling
+ ================================ */
+.o-kanban-card {
+ border-left: var(--o-kanban-border-width) solid var(--o-color-primary);
+ background-color: var(--o-color-background);
+ color: var(--o-color-text-primary);
+
+ &:hover {
+ background-color: var(--o-color-primary-hover);
+ color: var(--o-color-inverse);
+ }
+
+ &.selected {
+ background-color: var(--o-kanban-selected-background);
+ border-left: var(--o-kanban-border-width) solid var(--o-color-secondary);
+ box-shadow: 0 0 6px rgba(0,0,0,0.1);
+ }
+}
+
+.o-form-view {
+ background-color: var(--o-color-background);
+ color: var(--o-color-text-primary);
+}
+
+.btn-primary-custom {
+ background-color: var(--o-color-primary);
+ border-color: var(--o-color-primary);
+ color: var(--o-color-inverse);
+
+ &:hover {
+ background-color: var(--o-color-primary-hover);
+ border-color: var(--o-color-primary-hover);
+ }
+
+ &:disabled {
+ background-color: var(--o-main-color-muted);
+ border-color: var(--o-main-color-muted);
+ color: var(--o-color-inverse);
+ opacity: 0.6;
+ cursor: not-allowed;
+ }
+}
diff --git a/code_backend_theme/static/src/xml/sidebar.xml b/code_backend_theme/static/src/xml/sidebar.xml
new file mode 100644
index 0000000..f1ea949
--- /dev/null
+++ b/code_backend_theme/static/src/xml/sidebar.xml
@@ -0,0 +1,34 @@
+
+
+
+
+
+
+
+ +
+ Features
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+ 
+
+
+
+
+
+ New
+
+ Fully Responsive Layout
++ Now take advantage of everything your dashboard has to offer even on the go. Our design are + now + fully responsive enabling you to view and manage everything from the comfort of your mobile + device. Everything + has been designed in a meticulous fashion so that every view snaps itself to fit the size of + the + device you are using, be it smartphones, tablet or any other portables, our theme adjusts + itself + to fit the screen size. +
+ + +Fully responsive
+ + + + +Fly-out hamburger menu on the left
+ + + + +Fits perfectly to all screen sizes
+ + + + +Quick access menu at the bottom in discuss
+ + +
+
+
+
+
+
+
+
+
+ Kanban Group View
++ The Code Backend Theme V14 Gives You a Fully Modified Kanban View and Kanban Group View. + The Section Wise Separated Stages give a Pleasant Experience And an Extraordinary Design + To Your Content Tiles Making The Tiles Look Great. + It will Give You a Clean Layout with the New Color Combination and a Modified Font. +
+
+
+
+
+
+
+
+ Modified Font
+ + + + +New Color Combination
+ + + + +Full Screen View
+ +
+
+
+
+ Stages are Separated in View
+ + + + +Clean Layout
+ + + + +Buttons with New Colors
+ +
+ 
+
+
+
+
+
+
+
+
+
+
+
+ List View
++ The All new Code Backend Theme V14 Gives You The Fully Modified List View and This Table Design + is Also Have Awesome Design and it Gives You More Beauty for Your Odoo Backend. + It will Give You a Clean Layout with the New Color Combination and a Modified Font. +
+
+
+
+
+
+
+
+ Modified Table Style
+ + + + +New Color Combination
+ + + + +New Scroll Bar
+ +
+
+
+
+ New Status Tag
+ + + + +New Scrollbar
+ + + + +Buttons with New Colors
+ +
+ 
+
+
+
+
+
+
+
+
+
+
+
+ Form View
++ Code Backend Theme Gives You The Fully Modified Form View with a Full Screen Experience. It will + Give You a Clean Layout with the New Color Combination + and a Modified Font. +
+
+
+
+
+
+
+
+ Modified Form Style
+ + + + +Full Screen Form View
+ + + + +New Looks for Tabs
+ +
+
+
+
+ New Style for Required Field
+ + + + +New Chatter Style Under Form View
+ + + + +New Looks for Status Button
+ +
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+ Overview
++ Code Backend Theme V14 is an Attractive Theme for Your Odoo 14. + This Theme Will Change Improve Your Experience With Odoo. + This is a Minimalist and Elegant Backend Theme for Odoo 14 And Can Offer a Perfect Choice + for + Your Odoo Backend. +
+
+
+
+
+ Modified Structure for All Type Views
+ + + + +New Style for Active Menus, Radio Buttons and Checkboxes
+ + + +New Color Combination
+ + + + +New Look for All Applications
+ + + +A Clean layout and New Font Style
+ + + +Sidebar with New Menu Icons
+ + +
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+ Easily Access Sidebar Menu
++ Reveal the sidebar menu with just a click. Sidebar menu features all the relevant links to + navigate + through the application. + Hiding the sidebar leaves more space on the main area offering a distraction-free view that lets + you + focus on what matters the most. +
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ Screenshots
+
+
+
+
+
+
+
+
+
+ 1
+Login Page
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+ 2
+Group By View
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+ 3
+Settings Page
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+ 4
+Discuss Page
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+ 5
+Product Kanban View
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+ 6
+Purchase List View
+
+ 
+
+
+
+
+
+
+
+
+
+
+ 7
+Product View with Smart Buttons
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+ 8
+Modified Alert Notifications are Placed on the Right Bottom of Display +
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+ 9
+Wizards and User Error Popups
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+ 10
+New Looks for The Tabs
+
+ 
+
+
+
+
+
+
+
+
+
+
+ 11
+Recruitment Kanban View With Ribbons
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+ 12
+Sales Kanban View
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+ 13
+Modified Kanban View for Employees With New Designed Category Section
+
+ 
+
+
+
+
+
+
+
+
+
+
+ 14
+Newly Customised Chatter and Popup Chatter
+
+ 
+
+
+
+
+
+
+
+
+
+
+ 15
+New Looks for Wizards and Buttons with New Colors
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+ 16
+Sidebar with List View
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+ 17
+Sidebar with Settings Page View
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+ 18
+Attendance Pages
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+ 19
+Invoice Pages
+
+ 
+
+
+
+
+
+
+
+
+
+
+ 20
+Graphs with Sidebar
+
+ 
+
+
+
+
+
+
+
+
+ +
+ Our Services
+
+
+
+
+ 
+
+
+ + Odoo + Customization
+
+
+
+
+ 
+
+
+ + Odoo + Implementation
+
+
+
+
+ 
+
+
+ + Odoo + Support
+
+
+
+
+ 
+
+
+ + Hire + Odoo + Developer
+
+
+
+
+ 
+
+
+ + Odoo + Integration
+
+
+
+
+ 
+
+
+ + Odoo + Migration
+
+
+
+
+ 
+
+
+ + Odoo + Consultancy
+
+
+
+
+ 
+
+
+ + Odoo + Implementation
+
+
+
+ 
+
+
+ + Odoo + Licensing Consultancy
+
+
+
+
+
+
+ +
+ Our Industries
+
+
+
+
+ 
+
+
+ + Trading +
+Easily + procure + and + sell your products
+
+
+
+
+ 
+
+
+ + POS +
+Easy + configuration + and convivial experience
+
+
+
+
+ 
+
+
+ + Education +
+A + platform for + educational management
+
+
+
+ 
+
+
+ + Manufacturing +
+Plan, + track and + schedule your operations
+
+
+
+ 
+
+
+ + E-commerce & Website +
+Mobile + friendly, + awe-inspiring product pages
+
+
+
+ 
+
+
+ + Service Management +
+Keep + track of + services and invoice
+
+
+
+ 
+
+
+ + Restaurant +
+Run + your bar or + restaurant methodically
+
+
+
+ 
+
+
+ + Hotel Management +
+An + all-inclusive + hotel management application
+
+
+
+
+
+
+ +
+ Need Help?
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+ 
+
+
+