Update styling/enhanced_ui.py

styling/enhanced_ui.py

@@ -300,6 +300,9 @@ class UIEnhancer:
     
     def create_sidebar(self, menu_items):
         """إنشاء الشريط الجانبي مع قائمة العناصر"""
+        # إنشاء معرف فريد للزر بناءً على عنوان الصفحة
+        button_key = f"toggle_theme_button_{self.page_title}"
+        
         with st.sidebar:
             # إضافة الشعار
             st.markdown(
@@ -337,8 +340,8 @@ class UIEnhancer:
             
             st.divider()
             
-            # إضافة زر تبديل السمة
-            if st.button("تبديل السمة 🌓"):
+            # إضافة زر تبديل السمة مع معرف فريد
+            if st.button("تبديل السمة 🌓", key=button_key):
                 self.toggle_theme()
                 st.experimental_rerun()
             
@@ -357,6 +360,10 @@ class UIEnhancer:
     
     def create_header(self, title, subtitle=None, show_actions=True):
         """إنشاء ترويسة الصفحة"""
+        # إنشاء معرفات فريدة للأزرار
+        add_button_key = f"add_button_{title}"
+        update_button_key = f"update_button_{title}"
+        
         col1, col2 = st.columns([3, 1])
         
         with col1:
@@ -366,15 +373,11 @@ class UIEnhancer:
         
         if show_actions:
             with col2:
-                st.markdown(
-                    """
-                    <div class="header-actions" style="display: flex; justify-content: flex-end; gap: 10px;">
-                        <button class="custom-button" style="background-color: #43A047;">إضافة جديد</button>
-                        <button class="custom-button" style="background-color: #1E88E5;">تحديث</button>
-                    </div>
-                    """,
-                    unsafe_allow_html=True
-                )
+                col2_1, col2_2 = st.columns(2)
+                with col2_1:
+                    st.button("إضافة جديد", key=add_button_key)
+                with col2_2:
+                    st.button("تحديث", key=update_button_key)
         
         st.divider()
     
@@ -408,205 +411,176 @@ class UIEnhancer:
             unsafe_allow_html=True
         )
     
-    def create_card(self, title, content, footer=None, color=None):
+    def create_card(self, title, content, color=None):
         """إنشاء بطاقة عامة"""
         if color is None:
             color = self.COLORS['primary']
         
-        footer_html = ""
-        if footer is not None:
-            footer_html = f'<div style="margin-top: 15px; padding-top: 10px; border-top: 1px solid {self.COLORS["border"]}; font-size: 0.9rem; color: #666;">{footer}</div>'
-        
         st.markdown(
             f"""
             <div class="custom-card" style="border-top: 4px solid {color};">
                 <h3 style="color: {color}; margin-top: 0;">{title}</h3>
                 <div>{content}</div>
-                {footer_html}
             </div>
             """,
             unsafe_allow_html=True
         )
     
-    def create_status_badge(self, status):
-        """إنشاء شارة حالة"""
-        status_colors = {
-            "جديد": self.COLORS['info'],
-            "قيد التسعير": self.COLORS['warning'],
-            "تم التقديم": self.COLORS['primary'],
-            "تمت الترسية": self.COLORS['success'],
-            "قيد التنفيذ": self.COLORS['accent'],
-            "منتهي": self.COLORS['secondary'],
-            "ملغي": self.COLORS['danger']
-        }
-        
-        color = status_colors.get(status, self.COLORS['primary'])
-        
-        return f"""
-        <span style="background-color: {color}; color: white; padding: 3px 8px; border-radius: 12px; font-size: 0.8rem;">
-            {status}
-        </span>
-        """
+    def create_button(self, label, color=None, icon=None, key=None):
+        """إنشاء زر مخصص"""
+        if color is None:
+            color = self.COLORS['primary']
+        
+        # إنشاء معرف فريد للزر إذا لم يتم توفيره
+        if key is None:
+            key = f"button_{label}_{hash(label)}"
+        
+        icon_html = f"{icon} " if icon else ""
+        
+        return st.button(
+            f"{icon_html}{label}",
+            key=key
+        )
     
-    def create_progress_bar(self, percent, label=None):
-        """إنشاء شريط تقدم"""
-        if label is None:
-            label = f"{percent}%"
-        
-        # تحديد لون شريط التقدم بناءً على النسبة
-        if percent < 30:
-            color = self.COLORS['danger']
-        elif percent < 70:
-            color = self.COLORS['warning']
+    def create_tabs(self, tab_names):
+        """إنشاء تبويبات"""
+        return st.tabs(tab_names)
+    
+    def create_expander(self, title, expanded=False, key=None):
+        """إنشاء عنصر قابل للتوسيع"""
+        # إنشاء معرف فريد للعنصر إذا لم يتم توفيره
+        if key is None:
+            key = f"expander_{title}_{hash(title)}"
+        
+        return st.expander(title, expanded=expanded, key=key)
+    
+    def create_data_table(self, data, use_container_width=True, hide_index=True):
+        """إنشاء جدول بيانات"""
+        return st.dataframe(data, use_container_width=use_container_width, hide_index=hide_index)
+    
+    def create_chart(self, chart_type, data, **kwargs):
+        """إنشاء رسم بياني"""
+        if chart_type == "bar":
+            return st.bar_chart(data, **kwargs)
+        elif chart_type == "line":
+            return st.line_chart(data, **kwargs)
+        elif chart_type == "area":
+            return st.area_chart(data, **kwargs)
         else:
-            color = self.COLORS['success']
+            return st.bar_chart(data, **kwargs)
+    
+    def create_form(self, title, key=None):
+        """إنشاء نموذج"""
+        # إنشاء معرف فريد للنموذج إذا لم يتم توفيره
+        if key is None:
+            key = f"form_{title}_{hash(title)}"
         
-        st.markdown(
-            f"""
-            <div style="margin-bottom: 10px;">
-                <div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
-                    <span>{label}</span>
-                    <span>{percent}%</span>
-                </div>
-                <div style="background-color: {self.COLORS['light']}; border-radius: 5px; height: 10px;">
-                    <div style="background-color: {color}; width: {percent}%; height: 100%; border-radius: 5px;"></div>
-                </div>
-            </div>
-            """,
-            unsafe_allow_html=True
-        )
+        return st.form(key=key)
     
-    def create_tabs_container(self, tabs_data):
-        """إنشاء حاوية تبويبات مخصصة"""
-        # إنشاء أزرار التبويب
-        tab_buttons_html = ""
-        for i, tab in enumerate(tabs_data):
-            active_class = "active" if i == 0 else ""
-            tab_buttons_html += f"""
-            <button class="tablinks {active_class}" onclick="openTab(event, 'tab{i}')">{tab['title']}</button>
-            """
-        
-        # إنشاء محتوى التبويبات
-        tab_content_html = ""
-        for i, tab in enumerate(tabs_data):
-            display_style = "block" if i == 0 else "none"
-            tab_content_html += f"""
-            <div id="tab{i}" class="tabcontent" style="display: {display_style};">
-                {tab['content']}
-            </div>
-            """
-        
-        # إنشاء JavaScript للتبديل بين التبويبات
-        js = """
-        <script>
-        function openTab(evt, tabName) {
-            var i, tabcontent, tablinks;
-            tabcontent = document.getElementsByClassName("tabcontent");
-            for (i = 0; i < tabcontent.length; i++) {
-                tabcontent[i].style.display = "none";
-            }
-            tablinks = document.getElementsByClassName("tablinks");
-            for (i = 0; i < tablinks.length; i++) {
-                tablinks[i].className = tablinks[i].className.replace(" active", "");
-            }
-            document.getElementById(tabName).style.display = "block";
-            evt.currentTarget.className += " active";
-        }
-        </script>
-        """
+    def create_file_uploader(self, label, types=None, key=None):
+        """إنشاء أداة رفع الملفات"""
+        # إنشاء معرف فريد لأداة رفع الملفات إذا لم يتم توفيره
+        if key is None:
+            key = f"file_uploader_{label}_{hash(label)}"
         
-        # إنشاء CSS للتبويبات
-        css = f"""
-        <style>
-        .tab {{
-            overflow: hidden;
-            border: 1px solid {self.COLORS['border']};
-            background-color: {self.COLORS['light']};
-            border-radius: 5px 5px 0 0;
-        }}
+        return st.file_uploader(label, type=types, key=key)
+    
+    def create_date_input(self, label, value=None, key=None):
+        """إنشاء حقل إدخال تاريخ"""
+        # إنشاء معرف فريد لحقل إدخال التاريخ إذا لم يتم توفيره
+        if key is None:
+            key = f"date_input_{label}_{hash(label)}"
         
-        .tab button {{
-            background-color: inherit;
-            float: right;
-            border: none;
-            outline: none;
-            cursor: pointer;
-            padding: 14px 16px;
-            transition: 0.3s;
-            font-size: 16px;
-            font-family: 'Tajawal', sans-serif;
-        }}
+        return st.date_input(label, value=value, key=key)
+    
+    def create_select_box(self, label, options, index=0, key=None):
+        """إنشاء قائمة منسدلة"""
+        # إنشاء معرف فريد للقائمة المنسدلة إذا لم يتم توفيره
+        if key is None:
+            key = f"select_box_{label}_{hash(label)}"
         
-        .tab button:hover {{
-            background-color: {self.COLORS['primary'] + '20'};
-        }}
+        return st.selectbox(label, options, index=index, key=key)
+    
+    def create_multi_select(self, label, options, default=None, key=None):
+        """إنشاء قائمة اختيار متعدد"""
+        # إنشاء معرف فريد لقائمة الاختيار المتعدد إذا لم يتم توفيره
+        if key is None:
+            key = f"multi_select_{label}_{hash(label)}"
         
-        .tab button.active {{
-            background-color: {self.COLORS['primary']};
-            color: white;
-        }}
+        return st.multiselect(label, options, default=default, key=key)
+    
+    def create_slider(self, label, min_value, max_value, value=None, step=1, key=None):
+        """إنشاء شريط تمرير"""
+        # إنشاء معرف فريد لشريط التمرير إذا لم يتم توفيره
+        if key is None:
+            key = f"slider_{label}_{hash(label)}"
         
-        .tabcontent {{
-            display: none;
-            padding: 20px;
-            border: 1px solid {self.COLORS['border']};
-            border-top: none;
-            border-radius: 0 0 5px 5px;
-        }}
-        </style>
-        """
+        return st.slider(label, min_value=min_value, max_value=max_value, value=value, step=step, key=key)
+    
+    def create_text_input(self, label, value="", key=None):
+        """إنشاء حقل إدخال نصي"""
+        # إنشاء معرف فريد لحقل الإدخال النصي إذا لم يتم توفيره
+        if key is None:
+            key = f"text_input_{label}_{hash(label)}"
+        
+        return st.text_input(label, value=value, key=key)
+    
+    def create_text_area(self, label, value="", height=None, key=None):
+        """إنشاء منطقة نص"""
+        # إنشاء معرف فريد لمنطقة النص إذا لم يتم توفيره
+        if key is None:
+            key = f"text_area_{label}_{hash(label)}"
         
-        # تجميع HTML
-        html = f"""
-        {css}
-        <div class="tab">
-            {tab_buttons_html}
-        </div>
+        return st.text_area(label, value=value, height=height, key=key)
+    
+    def create_number_input(self, label, min_value=None, max_value=None, value=0, step=1, key=None):
+        """إنشاء حقل إدخال رقمي"""
+        # إنشاء معرف فريد لحقل الإدخال الرقمي إذا لم يتم توفيره
+        if key is None:
+            key = f"number_input_{label}_{hash(label)}"
         
-        {tab_content_html}
+        return st.number_input(label, min_value=min_value, max_value=max_value, value=value, step=step, key=key)
+    
+    def create_checkbox(self, label, value=False, key=None):
+        """إنشاء خانة اختيار"""
+        # إنشاء معرف فريد لخانة الاختيار إذا لم يتم توفيره
+        if key is None:
+            key = f"checkbox_{label}_{hash(label)}"
         
-        {js}
-        """
+        return st.checkbox(label, value=value, key=key)
+    
+    def create_radio(self, label, options, index=0, key=None):
+        """إنشاء أزرار راديو"""
+        # إنشاء معرف فريد لأزرار الراديو إذا لم يتم توفيره
+        if key is None:
+            key = f"radio_{label}_{hash(label)}"
         
-        st.markdown(html, unsafe_allow_html=True)
+        return st.radio(label, options, index=index, key=key)
     
-    def get_icon_html(self, icon_name, size="1rem", color=None):
-        """الحصول على HTML لأيقونة Bootstrap"""
-        if color is None:
-            color = self.COLORS['primary']
+    def create_progress_bar(self, value, key=None):
+        """إنشاء شريط تقدم"""
+        # إنشاء معرف فريد لشريط التقدم إذا لم يتم توفيره
+        if key is None:
+            key = f"progress_bar_{value}_{hash(str(value))}"
         
-        return f"""
-        <i class="bi bi-{icon_name}" style="font-size: {size}; color: {color};"></i>
-        """
+        return st.progress(value, key=key)
     
-    def add_bootstrap_icons(self):
-        """إضافة أيقونات Bootstrap"""
-        st.markdown(
-            """
-            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
-            """,
-            unsafe_allow_html=True
-        )
+    def create_spinner(self, text="جاري التحميل..."):
+        """إنشاء مؤشر تحميل"""
+        return st.spinner(text)
     
-    def get_image_base64(self, image_path):
-        """تحويل الصورة إلى تنسيق base64"""
-        with open(image_path, "rb") as img_file:
-            return base64.b64encode(img_file.read()).decode()
-    
-    def add_logo(self, logo_path, width="150px"):
-        """إضافة شعار"""
-        if os.path.exists(logo_path):
-            try:
-                base64_image = self.get_image_base64(logo_path)
-                st.markdown(
-                    f"""
-                    <div style="text-align: center; margin-bottom: 20px;">
-                        <img src="data:image/png;base64,{base64_image}" width="{width}">
-                    </div>
-                    """,
-                    unsafe_allow_html=True
-                )
-            except Exception as e:
-                st.error(f"خطأ في تحميل الشعار: {e}")
-        else:
-            st.warning(f"ملف الشعار غير موجود: {logo_path}")
+    def create_success_message(self, message):
+        """إنشاء رسالة نجاح"""
+        return st.success(message)
+    
+    def create_error_message(self, message):
+        """إنشاء رسالة خطأ"""
+        return st.error(message)
+    
+    def create_warning_message(self, message):
+        """إنشاء رسالة تحذير"""
+        return st.warning(message)
+    
+    def create_info_message(self, message):
+        """إنشاء رسالة معلومات"""
+        return st.info(message)