sort number section

src/pages/setting/personality/Personality.tsx

@@ -11,7 +11,7 @@ import { toast } from '@/components/Toast'
 
 const Personality: FC = () => {
     const { id } = useParams()
-    const { setData, data, addSection } = usePersonalityStore()
+    const { setData, data, addSection, getSortedSectionKeys } = usePersonalityStore()
     const { data: template } = useGetTemplate(id || '')
 
     useEffect(() => {
@@ -34,7 +34,6 @@ const Personality: FC = () => {
             return <FooterSection key={sectionKey} />
         }
 
-        // For custom sections, use GenericSection with full functionality
         return <GenericSection key={sectionKey} sectionKey={sectionKey} />
     }
 
@@ -64,19 +63,23 @@ const Personality: FC = () => {
         )
     }
 
+    console.log('data', data);
+
+
+    const sortedSectionKeys = getSortedSectionKeys();
+
     return (
         <div className='flex-1 bg-white rounded-4xl p-8 personality-template'>
             <table width="100%" cellPadding="0" cellSpacing="0" border={0} style={{ borderCollapse: 'collapse' }}>
                 <tbody>
-                    {Object.keys(data).map((sectionKey, index) => {
-                        const sections = Object.keys(data);
+                    {sortedSectionKeys.map((sectionKey, index) => {
                         const elements = [];
 
                         // Add the section
                         elements.push(renderSection(sectionKey));
 
                         // Add plus button after each section except the last one
-                        if (index < sections.length - 1) {
+                        if (index < sortedSectionKeys.length - 1) {
                             elements.push(renderPlusButton(sectionKey));
                         }
 
@@ -84,7 +87,7 @@ const Personality: FC = () => {
                     }).flat()}
 
                     {/* Plus button at the end */}
-                    {Object.keys(data).length > 0 && renderPlusButton(Object.keys(data)[Object.keys(data).length - 1])}
+                    {sortedSectionKeys.length > 0 && renderPlusButton(sortedSectionKeys[sortedSectionKeys.length - 1])}
                 </tbody>
             </table>
         </div>

src/pages/setting/personality/store/Store.ts

@@ -13,11 +13,26 @@ import {
   SelectedElement,
 } from "../types/Types";
 
-export const usePersonalityStore = create<PersonalityStore>((set) => ({
+// Helper function to get sections sorted by sortNumber
+export const getSortedSectionKeys = (data: PersonalityDataType): string[] => {
+  return Object.keys(data).sort((a, b) => {
+    const sortA = data[a].sortNumber || 0;
+    const sortB = data[b].sortNumber || 0;
+    return sortA - sortB;
+  });
+};
+
+export const usePersonalityStore = create<PersonalityStore>((set, get) => ({
   data: {
-    header: { name: "هدر", columnsCount: 1, items: [] },
-    content: { name: "محتوا", columnsCount: 1, items: [], isContent: true },
-    footer: { name: "فوتر", columnsCount: 1, items: [] },
+    header: { name: "هدر", columnsCount: 1, items: [], sortNumber: 1 },
+    content: {
+      name: "محتوا",
+      columnsCount: 1,
+      items: [],
+      isContent: true,
+      sortNumber: 2,
+    },
+    footer: { name: "فوتر", columnsCount: 1, items: [], sortNumber: 3 },
   },
 
   activeSection: "",
@@ -129,18 +144,42 @@ export const usePersonalityStore = create<PersonalityStore>((set) => ({
         return state; // Section already exists
       }
 
+      // Calculate the sortNumber for the new section
+      let newSortNumber = 1;
+      if (afterSectionKey) {
+        const afterSection = state.data[afterSectionKey];
+        if (afterSection) {
+          // Insert after the specified section, so sortNumber should be higher
+          newSortNumber = afterSection.sortNumber + 1;
+
+          // Update sortNumbers of sections that come after
+          Object.keys(state.data).forEach((key) => {
+            if (state.data[key].sortNumber > afterSection.sortNumber) {
+              state.data[key].sortNumber += 1;
+            }
+          });
+        }
+      } else {
+        // Add at the end - find the highest sortNumber and add 1
+        const maxSortNumber = Math.max(
+          ...Object.values(state.data).map((section) => section.sortNumber || 0)
+        );
+        newSortNumber = maxSortNumber + 1;
+      }
+
       // Create new section data
       const newSection = {
         name: sectionName,
         columnsCount: 1,
         items: [],
+        sortNumber: newSortNumber,
       };
 
       // If afterSectionKey is provided, insert after that section
       if (afterSectionKey) {
         const keys = Object.keys(state.data);
         const afterIndex = keys.indexOf(afterSectionKey);
-
+        // TODO all index expect that increase +
         if (afterIndex !== -1) {
           const newData: typeof state.data = {};
 
@@ -732,4 +771,6 @@ export const usePersonalityStore = create<PersonalityStore>((set) => ({
       selectedElement: null,
       isEditMode: false,
     })),
+
+  getSortedSectionKeys: () => getSortedSectionKeys(get().data),
 }));

src/pages/setting/personality/types/Types.ts

@@ -101,6 +101,7 @@ export type PersonalityDataType = {
 
 export type SectionType = {
   columnsCount: number;
+  sortNumber: number;
   items: SectionItemType[];
 };
 
@@ -183,6 +184,7 @@ export type PersonalityStore = {
   setActiveItemIndex: (index: number) => void;
   setSelectedElement: (element: SelectedElement) => void; // New method
   setEditMode: (isEdit: boolean) => void; // New method
+  getSortedSectionKeys: () => string[]; // New method to get sorted section keys
 
   // Section management methods
   addSection: (afterSectionKey?: string) => void;

src/pages/setting/personality/utils/ExportHTML.ts

@@ -13,6 +13,7 @@ import {
   SocialIconSize,
   SocialIconStyle,
 } from "../types/Types";
+import { getSortedSectionKeys } from "../store/Store";
 import {
   getSocialIconPath,
   hasPngIcon,
@@ -597,8 +598,15 @@ export const exportPersonalityToHTML = async (
     JSON.stringify(data, null, 2)
   );
 
-  // Render all sections in the same order as they appear in the object
-  const sectionsHtml = Object.keys(data)
+  // Get sections sorted by sortNumber
+  const sortedSectionKeys = getSortedSectionKeys(data);
+  console.log(
+    "🔥 [ExportHTML] Sections sorted by sortNumber:",
+    sortedSectionKeys
+  );
+
+  // Render all sections in sortNumber order
+  const sectionsHtml = sortedSectionKeys
     .map((sectionKey) => {
       const sectionData = data[sectionKey];
       const height = getSectionHeight(sectionKey, sectionData);
@@ -615,6 +623,7 @@ export const exportPersonalityToHTML = async (
       const sectionStructure = {
         columnsCount: sectionData.columnsCount,
         items: sectionData.items || [],
+        sortNumber: sectionData.sortNumber,
       };
 
       const renderedSection = renderSection(sectionStructure, height, "");
@@ -629,7 +638,7 @@ export const exportPersonalityToHTML = async (
 
   console.log(
     "🔥 [ExportHTML] Total sections rendered:",
-    Object.keys(data).length
+    sortedSectionKeys.length
   );
   console.log(
     "🔥 [ExportHTML] Combined sections HTML length:",