' + data.name + '').attr('title', data.name);
- $(card_header).append(h4);
- $(card_container).append(card_header);
-
- // card body
- $(card_body).addClass('col-md-12 col-sm-12 col-xs-12 card-body');
- if (card_type == "table1") {
- var table = buildTableApprove(data);
- } else if (card_type == "table2") {
- var table = buildTableFollow(data);
- }
- $(card_body).append(table);
- $(card_container).append(card_body);
-
- // card
- $(card).append(card_container);
- return card;
-}
-
-/*
- NAME: buildTableApprove
- DESC: Using to create (APPROVE) rows/buttons base on sent data and it return DOM OBJECT
- RETURN: DOM OBJECT
-*/
-function buildTableApprove(data) {
- var table = document.createElement('table');
- var tbody = document.createElement('tbody');
- $(table).addClass('table');
- if (data.lines.length !== undefined && data.lines.length > 0) {
- $.each(data.lines, function(index) {
- var tr = document.createElement('tr');
- var td1 = document.createElement('td');
- var td2 = document.createElement('td');
- $(td1).html(data.lines[index].state_approval);
- $(td2).html('
';
- $('#check_button').html(checkout_button).removeClass('checkin-btn').addClass('checkout-btn');
- $('.last-checkin-section').html(check);
- $('.attendance-img-section').html(image);
- } else {
- var check = checkin_title + " " + name + ",";
- var image = '';
- $('#check_button').html(checkin_button).removeClass('checkout-btn').addClass('checkin-btn');
- $('.last-checkin-section').html(check);
- $('.attendance-img-section').html(image);
- }
-}
diff --git a/odex25_base/system_dashboard_classic/static/src/js/system_dashboard_self_service.js b/odex25_base/system_dashboard_classic/static/src/js/system_dashboard_self_service.js
index 4e691c555..787473eaf 100644
--- a/odex25_base/system_dashboard_classic/static/src/js/system_dashboard_self_service.js
+++ b/odex25_base/system_dashboard_classic/static/src/js/system_dashboard_self_service.js
@@ -16,6 +16,176 @@ odoo.define('system_dashboard_classic.dashboard_self_services', function(require
var functions = [];
window.click_actions = [];
+ /**
+ * Convert hex color to RGB components
+ * @param {string} hex - Color in hex format (#RRGGBB)
+ * @returns {object|null} RGB components {r, g, b}
+ */
+ function hexToRgbComponents(hex) {
+ if (!hex || typeof hex !== 'string') return null;
+ var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+ return result ? {
+ r: parseInt(result[1], 16),
+ g: parseInt(result[2], 16),
+ b: parseInt(result[3], 16)
+ } : null;
+ }
+
+ /**
+ * Lighten or darken a hex color
+ * @param {string} hex - Color in hex format
+ * @param {number} percent - Positive = lighter, Negative = darker
+ * @returns {string} Adjusted color in hex format
+ */
+ function adjustColor(hex, percent) {
+ if (!hex || typeof hex !== 'string') return hex;
+ // Remove # if present
+ hex = hex.replace(/^\s*#|\s*$/g, '');
+ // Convert 3-char hex to 6-char
+ if (hex.length === 3) {
+ hex = hex.replace(/(.)/g, '$1$1');
+ }
+ var r = parseInt(hex.substr(0, 2), 16);
+ var g = parseInt(hex.substr(2, 2), 16);
+ var b = parseInt(hex.substr(4, 2), 16);
+
+ r = Math.round(Math.min(255, Math.max(0, r + (r * percent / 100))));
+ g = Math.round(Math.min(255, Math.max(0, g + (g * percent / 100))));
+ b = Math.round(Math.min(255, Math.max(0, b + (b * percent / 100))));
+
+ return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
+ }
+
+ /**
+ * Animate a number from 0 to target value with smooth easing
+ * @param {jQuery|Element} element - The element to animate
+ * @param {number} targetValue - Final number to display
+ * @param {number} duration - Animation duration in ms (default 1000)
+ * @param {string} suffix - Optional suffix like 'days', 'hours' (default '')
+ * @param {number} decimals - Decimal places to show (default 0)
+ */
+ function animateCounter(element, targetValue, duration, suffix, decimals) {
+ duration = duration || 1000;
+ suffix = suffix || '';
+ decimals = decimals || 0;
+
+ var $el = $(element);
+ if (!$el.length || isNaN(targetValue)) return;
+
+ var startTime = null;
+ var startValue = 0;
+
+ // Easing function - easeOutQuad for smooth deceleration
+ function easeOutQuad(t) {
+ return t * (2 - t);
+ }
+
+ function animate(currentTime) {
+ if (!startTime) startTime = currentTime;
+ var elapsed = currentTime - startTime;
+ var progress = Math.min(elapsed / duration, 1);
+ var easedProgress = easeOutQuad(progress);
+ var currentValue = startValue + (targetValue - startValue) * easedProgress;
+
+ // Format the number
+ var displayValue = decimals > 0 ? currentValue.toFixed(decimals) : Math.round(currentValue);
+ $el.text(displayValue + (suffix ? ' ' + suffix : ''));
+
+ if (progress < 1) {
+ requestAnimationFrame(animate);
+ }
+ }
+
+ requestAnimationFrame(animate);
+ }
+
+ /**
+ * Show celebration modal/banner for birthday or work anniversary
+ * @param {string} type - 'birthday' or 'anniversary'
+ * @param {number} years - Years of service (for anniversary)
+ */
+ function showCelebration(type, years) {
+ var isRtl = $('body').hasClass('o_rtl');
+ var title, message, emoji, badgeClass;
+
+ if (type === 'birthday') {
+ emoji = '🎂';
+ badgeClass = 'birthday-mode';
+ title = isRtl ? 'عيد ميلاد سعيد!' : 'Happy Birthday!';
+ // Gendered pronouns: لك (male) / لكِ (female)
+ var genderInfo = window.dashboardGenderInfo || {pronoun_you: 'ك'};
+ var forYou = 'ل' + genderInfo.pronoun_you; // لك or لكِ
+ message = isRtl ? ('نتمنى ' + forYou + ' عاماً جديداً مليئاً بالنجاح والسعادة ✨') : 'Wishing you a wonderful year ahead! ✨';
+ } else if (type === 'anniversary') {
+ emoji = '⭐';
+ badgeClass = 'anniversary-mode';
+ title = isRtl ? 'شكراً لعطائك!' : 'Thank You!';
+ message = isRtl
+ ? 'نقدر إخلاصك وتفانيك في العمل'
+ : 'We appreciate your dedication';
+ } else {
+ return;
+ }
+
+ // Add celebration mode class to entire dashboard (persistent)
+ $('.dashboard-container').addClass('celebration-mode ' + badgeClass);
+
+ // Add golden glow ring around employee photo
+ $('.img-box').addClass('celebration-glow');
+
+ // Add appreciation ribbon at bottom of header for anniversary
+ if (type === 'anniversary' && $('.appreciation-ribbon').length === 0) {
+ var ribbonMessage = isRtl
+ ? 'بمناسبة إتمامك عامًا جديدًا معنا، نثمّن عطائك ونتطلع للمزيد ⭐'
+ : '⭐ Celebrating another year with us. We value your contribution and look forward to more!';
+ var $ribbon = $('';
- $('#check_button').html(checkout_button).removeClass('checkin-btn').addClass('checkout-btn');
- $('.last-checkin-section').html(check);
- $('.attendance-img-section').html(image);
+ // User is checked in - show logout icon (arrow out) with warning color
+ var image = '';
+ $('.attendance-img-section').html(image).removeClass('state-checkin').addClass('state-checkout');
+
+ // Show last check-in info below icon (on two lines)
+ var checkinInfoHtml = '';
- $('#check_button').html(checkin_button).removeClass('checkout-btn').addClass('checkin-btn');
- $('.last-checkin-section').html(check);
- $('.attendance-img-section').html(image);
+ // User is NOT checked in - show login icon (arrow in) with success color
+ var image = '
';
+ $('.attendance-img-section').html(image).removeClass('state-checkout').addClass('state-checkin');
+
+ // Show last check-out info below icon (on two lines) if time exists
+ if (data.time) {
+ var checkoutInfoHtml = '';
+ }
+
+ $(h4).html(iconOrImgHtml + ' ' + data.name + '').attr('title', data.name);
+ $(card_header).append(h4);
+ $(card_container).append(card_header);
+
+ // card body
+ $(card_body).addClass('col-md-12 col-sm-12 col-xs-12 card-body');
+ if (card_type == "table1") {
+ var table = buildTableApprove(data);
+ } else if (card_type == "table2") {
+ var table = buildTableFollow(data);
+ }
+ $(card_body).append(table);
+ $(card_container).append(card_body);
+
+ // card
+ $(card).append(card_container);
+ return card;
+}
+
+/*
+ NAME: buildTableApprove
+ DESC: Using to create (APPROVE) rows/buttons base on sent data and it return DOM OBJECT
+ RETURN: DOM OBJECT
+*/
+function buildTableApprove(data) {
+ var table = document.createElement('table');
+ var tbody = document.createElement('tbody');
+ $(table).addClass('table');
+ if (data.lines.length !== undefined && data.lines.length > 0) {
+ $.each(data.lines, function(index) {
+ var tr = document.createElement('tr');
+ var td1 = document.createElement('td');
+ var td2 = document.createElement('td');
+ $(td1).html(data.lines[index].state_approval);
+ $(td2).html('+ + 0 + +
++ + 0 + +
+ + +