chore: update dependencies and enhance datetime picker styling

- Updated `multer` to version 2.1.0 and `@vitejs/plugin-react` to version 4.7.0 in package.json.
- Updated `vite` to version 6.4.1.
- Enhanced CSS for various themes to include `color-scheme` and `--picker-icon-filter` properties for better datetime picker integration.
- Refactored Calendar component to include styled datetime picker with icons for start and end time inputs.
- Improved timezone display for better user experience.

src/pages/Calendar.jsx

@@ -535,28 +535,33 @@ export default function Calendar() {
             <div className="grid grid-cols-2 gap-4">
               <div>
                 <label className="block text-sm font-medium text-th-text mb-1.5">{t('calendar.startTime')} *</label>
-                <input
-                  type="datetime-local"
-                  value={form.start_time}
-                  onChange={e => setForm({ ...form, start_time: e.target.value })}
-                  className="input-field"
-                  required
-                />
+                <div className="datetime-picker">
+                  <CalendarIcon size={16} className="datetime-icon" />
+                  <input
+                    type="datetime-local"
+                    value={form.start_time}
+                    onChange={e => setForm({ ...form, start_time: e.target.value })}
+                    required
+                  />
+                </div>
               </div>
               <div>
                 <label className="block text-sm font-medium text-th-text mb-1.5">{t('calendar.endTime')} *</label>
-                <input
-                  type="datetime-local"
-                  value={form.end_time}
-                  onChange={e => setForm({ ...form, end_time: e.target.value })}
-                  className="input-field"
-                  required
-                />
+                <div className="datetime-picker">
+                  <Clock size={16} className="datetime-icon" />
+                  <input
+                    type="datetime-local"
+                    value={form.end_time}
+                    onChange={e => setForm({ ...form, end_time: e.target.value })}
+                    required
+                  />
+                </div>
               </div>
             </div>
-            <p className="text-xs text-th-text-s -mt-2">
-              {t('calendar.timezone')}: {getLocalTimezone()}
-            </p>
+            <div className="flex items-center gap-1.5 -mt-2 text-xs text-th-text-s">
+              <Globe size={12} className="flex-shrink-0" />
+              <span>{getLocalTimezone()}</span>
+            </div>
 
             <div>
               <label className="block text-sm font-medium text-th-text mb-1.5">{t('calendar.linkedRoom')}</label>
@@ -609,7 +614,10 @@ export default function Calendar() {
               <span>
                 {new Date(showDetail.start_time).toLocaleString()} - {new Date(showDetail.end_time).toLocaleString()}
               </span>
-              <span className="text-xs opacity-70">({getLocalTimezone()})</span>
+            </div>
+            <div className="flex items-center gap-1.5 text-xs text-th-text-s opacity-70 -mt-2">
+              <Globe size={12} />
+              <span>{getLocalTimezone()}</span>
             </div>
 
             {showDetail.description && (