fix(modal): render Modal with React Portal to center it on the screen

fix(calendar): add type="button" to all buttons in PersianCalendar to prevent form submission

assets/admin/components/ui/PersianCalendar.tsx

@@ -127,6 +127,7 @@ export default function PersianCalendar({ value, onChange, onClose, enableYearPi
       {/* Header */}
       <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
         <button
+          type="button"
           onClick={mode === 'year' ? () => setYearRangeStart(s => s - 12) : nextMonth}
           style={{ ...navBtnStyle, visibility: mode === 'month' ? 'hidden' : 'visible' }}
         >
@@ -157,6 +158,7 @@ export default function PersianCalendar({ value, onChange, onClose, enableYearPi
         )}
 
         <button
+          type="button"
           onClick={mode === 'year' ? () => setYearRangeStart(s => s + 12) : prevMonth}
           style={{ ...navBtnStyle, visibility: mode === 'month' ? 'hidden' : 'visible' }}
         >
@@ -182,6 +184,7 @@ export default function PersianCalendar({ value, onChange, onClose, enableYearPi
               return (
                 <button
                   key={i}
+                  type="button"
                   onClick={() => selectDay(day)}
                   style={{
                     width: 32, height: 32, borderRadius: '50%', fontSize: 12,
@@ -211,6 +214,7 @@ export default function PersianCalendar({ value, onChange, onClose, enableYearPi
             return (
               <button
                 key={m}
+                type="button"
                 onClick={() => { setViewMonth(m); setMode('day'); }}
                 style={{ ...gridItemStyle, background: active ? 'var(--primary)' : 'transparent', color: active ? '#fff' : 'var(--text)' }}
                 onMouseEnter={e => { if (!active) (e.currentTarget as HTMLButtonElement).style.background = 'var(--surface-2)'; }}
@@ -231,6 +235,7 @@ export default function PersianCalendar({ value, onChange, onClose, enableYearPi
             return (
               <button
                 key={y}
+                type="button"
                 onClick={() => { setViewYear(y); setMode('month'); }}
                 style={{ ...gridItemStyle, background: active ? 'var(--primary)' : 'transparent', color: active ? '#fff' : 'var(--text)' }}
                 onMouseEnter={e => { if (!active) (e.currentTarget as HTMLButtonElement).style.background = 'var(--surface-2)'; }}