uup

2026-01-23 20:35:40 +03:00
parent cf3b0e48ec
commit 66c151653e
137 changed files with 41495 additions and 0 deletions
--- a/app/routes/settings.tsx
+++ b/app/routes/settings.tsx
@@ -0,0 +1,314 @@
+import { json, type ActionFunctionArgs, type LoaderFunctionArgs } from '@remix-run/node';
+import { Form, useActionData, useLoaderData, useNavigation } from '@remix-run/react';
+import { useState } from 'react';
+import { requireAuth } from '~/lib/auth-middleware.server';
+import { DashboardLayout } from '~/components/layout/DashboardLayout';
+import { 
+  getAppSettings, 
+  updateSettings, 
+  type AppSettings,
+  initializeDefaultSettings 
+} from '~/lib/settings-management.server';
+
+export async function loader({ request }: LoaderFunctionArgs) {
+  const user = await requireAuth(request, 2); // Admin level required (1=superadmin, 2=admin)
+  
+  try {
+    // Initialize default settings if needed
+    await initializeDefaultSettings();
+    const settings = await getAppSettings();
+    return json({ user, settings, success: true });
+  } catch (error) {
+    console.error('Settings loader error:', error);
+    return json({ 
+      user,
+      settings: null, 
+      success: false, 
+      error: 'Failed to load settings' 
+    });
+  }
+}
+
+export async function action({ request }: ActionFunctionArgs) {
+  await requireAuth(request, 2); // Admin level required
+  
+  const formData = await request.formData();
+  const intent = formData.get('intent');
+
+  if (intent === 'updateSettings') {
+    try {
+      const settings: Partial<AppSettings> = {
+        dateFormat: formData.get('dateFormat') as 'ar-SA' | 'en-US',
+        currency: formData.get('currency') as string,
+        numberFormat: formData.get('numberFormat') as 'ar-SA' | 'en-US',
+        currencySymbol: formData.get('currencySymbol') as string,
+        dateDisplayFormat: formData.get('dateDisplayFormat') as string,
+      };
+
+      await updateSettings(settings);
+
+      return json({ 
+        success: true, 
+        message: 'Settings updated successfully' 
+      });
+    } catch (error) {
+      console.error('Settings update error:', error);
+      return json({ 
+        success: false, 
+        error: 'Failed to update settings' 
+      });
+    }
+  }
+
+  return json({ success: false, error: 'Invalid action' });
+}
+
+export default function SettingsPage() {
+  const { user, settings, success, error } = useLoaderData<typeof loader>();
+  const actionData = useActionData<typeof action>();
+  const navigation = useNavigation();
+  const isSubmitting = navigation.state === 'submitting';
+
+  const [formData, setFormData] = useState<AppSettings>(
+    settings || {
+      dateFormat: 'ar-SA',
+      currency: 'JOD',
+      numberFormat: 'ar-SA',
+      currencySymbol: 'د.أ',
+      dateDisplayFormat: 'dd/MM/yyyy'
+    }
+  );
+
+  const handleInputChange = (key: keyof AppSettings, value: string) => {
+    setFormData(prev => ({ ...prev, [key]: value }));
+  };
+
+  if (!success || !settings) {
+    return (
+      <DashboardLayout user={user}>
+        <div className="container mx-auto px-4 py-8">
+          <div className="bg-red-50 border border-red-200 rounded-lg p-4">
+            <h2 className="text-lg font-semibold text-red-800 mb-2">خطأ في تحميل الإعدادات</h2>
+            <p className="text-red-600">{error || 'Failed to load settings'}</p>
+          </div>
+        </div>
+      </DashboardLayout>
+    );
+  }
+
+  return (
+    <DashboardLayout user={user}>
+      <div className="container mx-auto px-4 py-8">
+        <div className="max-w-4xl mx-auto">
+          <div className="bg-white rounded-lg shadow-md">
+          <div className="px-6 py-4 border-b border-gray-200">
+            <h1 className="text-2xl font-bold text-gray-900">⚙️ إعدادات النظام</h1>
+            <p className="text-gray-600 mt-1">تكوين إعدادات التطبيق العامة</p>
+          </div>
+
+          <div className="p-6">
+            {actionData?.success && (
+              <div className="mb-6 bg-green-50 border border-green-200 rounded-lg p-4">
+                <p className="text-green-800">✅ {actionData.message}</p>
+              </div>
+            )}
+
+            {actionData?.error && (
+              <div className="mb-6 bg-red-50 border border-red-200 rounded-lg p-4">
+                <p className="text-red-800">❌ {actionData.error}</p>
+              </div>
+            )}
+
+            <Form method="post" className="space-y-6">
+              <input type="hidden" name="intent" value="updateSettings" />
+
+              {/* Date Format Settings */}
+              <div className="bg-gray-50 rounded-lg p-4">
+                <h3 className="text-lg font-semibold text-gray-900 mb-4">📅 إعدادات التاريخ</h3>
+                
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-2">
+                      تنسيق التاريخ
+                    </label>
+                    <select
+                      name="dateFormat"
+                      value={formData.dateFormat}
+                      onChange={(e) => handleInputChange('dateFormat', e.target.value)}
+                      className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    >
+                      <option value="ar-SA">عربي (ar-SA) - ٢٠٢٥/١١/٩</option>
+                      <option value="en-US">إنجليزي (en-US) - 11/9/2025</option>
+                    </select>
+                  </div>
+
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-2">
+                      نمط عرض التاريخ
+                    </label>
+                    <select
+                      name="dateDisplayFormat"
+                      value={formData.dateDisplayFormat}
+                      onChange={(e) => handleInputChange('dateDisplayFormat', e.target.value)}
+                      className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    >
+                      <option value="dd/MM/yyyy">يوم/شهر/سنة (09/11/2025)</option>
+                      <option value="MM/dd/yyyy">شهر/يوم/سنة (11/09/2025)</option>
+                      <option value="yyyy-MM-dd">سنة-شهر-يوم (2025-11-09)</option>
+                    </select>
+                  </div>
+                </div>
+
+                <div className="mt-4 p-3 bg-blue-50 rounded-md">
+                  <p className="text-sm text-blue-800">
+                    <strong>معاينة:</strong> {new Date().toLocaleDateString(formData.dateFormat)}
+                  </p>
+                </div>
+              </div>
+
+              {/* Currency Settings */}
+              <div className="bg-gray-50 rounded-lg p-4">
+                <h3 className="text-lg font-semibold text-gray-900 mb-4">💰 إعدادات العملة</h3>
+                
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-2">
+                      رمز العملة
+                    </label>
+                    <select
+                      name="currency"
+                      value={formData.currency}
+                      onChange={(e) => handleInputChange('currency', e.target.value)}
+                      className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    >
+                      <option value="JOD">دينار أردني (JOD)</option>
+                      <option value="USD">دولار أمريكي (USD)</option>
+                      <option value="EUR">يورو (EUR)</option>
+                      <option value="SAR">ريال سعودي (SAR)</option>
+                      <option value="AED">درهم إماراتي (AED)</option>
+                    </select>
+                  </div>
+
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-2">
+                      رمز العملة المعروض
+                    </label>
+                    <input
+                      type="text"
+                      name="currencySymbol"
+                      value={formData.currencySymbol}
+                      onChange={(e) => handleInputChange('currencySymbol', e.target.value)}
+                      className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                      placeholder="د.أ"
+                    />
+                  </div>
+                </div>
+
+                <div className="mt-4 p-3 bg-blue-50 rounded-md">
+                  <p className="text-sm text-blue-800">
+                    <strong>معاينة:</strong> {(1234.56).toLocaleString(formData.numberFormat, {
+                      minimumFractionDigits: 2,
+                      maximumFractionDigits: 2
+                    })} {formData.currencySymbol}
+                  </p>
+                </div>
+              </div>
+
+              {/* Number Format Settings */}
+              <div className="bg-gray-50 rounded-lg p-4">
+                <h3 className="text-lg font-semibold text-gray-900 mb-4">🔢 إعدادات الأرقام</h3>
+                
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-2">
+                    تنسيق الأرقام
+                  </label>
+                  <select
+                    name="numberFormat"
+                    value={formData.numberFormat}
+                    onChange={(e) => handleInputChange('numberFormat', e.target.value)}
+                    className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                  >
+                    <option value="ar-SA">عربي (ar-SA) - ١٬٢٣٤٫٥٦</option>
+                    <option value="en-US">إنجليزي (en-US) - 1,234.56</option>
+                  </select>
+                </div>
+
+                <div className="mt-4 p-3 bg-blue-50 rounded-md">
+                  <p className="text-sm text-blue-800">
+                    <strong>معاينة الأرقام:</strong> {(123456.789).toLocaleString(formData.numberFormat)}
+                  </p>
+                  <p className="text-sm text-blue-800">
+                    <strong>معاينة الكيلومترات:</strong> {(45000).toLocaleString(formData.numberFormat)} كم
+                  </p>
+                </div>
+              </div>
+
+              {/* Action Buttons */}
+              <div className="flex justify-end space-x-4 pt-6 border-t border-gray-200">
+                <button
+                  type="button"
+                  onClick={() => setFormData(settings)}
+                  className="px-4 py-2 text-gray-700 bg-gray-200 rounded-md hover:bg-gray-300 transition-colors"
+                  disabled={isSubmitting}
+                >
+                  إعادة تعيين
+                </button>
+                <button
+                  type="submit"
+                  disabled={isSubmitting}
+                  className="px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50 transition-colors"
+                >
+                  {isSubmitting ? 'جاري الحفظ...' : 'حفظ الإعدادات'}
+                </button>
+              </div>
+            </Form>
+          </div>
+          </div>
+
+          {/* Settings Preview Section */}
+          <div className="mt-8 bg-white rounded-lg shadow-md">
+            <div className="px-6 py-4 border-b border-gray-200">
+              <h2 className="text-xl font-semibold text-gray-900">👁️ معاينة الإعدادات</h2>
+            </div>
+            <div className="p-6">
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                <div className="bg-gray-50 p-4 rounded-lg">
+                  <h4 className="font-medium text-gray-900 mb-2">التاريخ والوقت</h4>
+                  <p className="text-sm text-gray-600">
+                    التاريخ: {new Date().toLocaleDateString(formData.dateFormat)}
+                  </p>
+                  <p className="text-sm text-gray-600">
+                    التاريخ والوقت: {new Date().toLocaleString(formData.dateFormat)}
+                  </p>
+                </div>
+                
+                <div className="bg-gray-50 p-4 rounded-lg">
+                  <h4 className="font-medium text-gray-900 mb-2">العملة والأرقام</h4>
+                  <p className="text-sm text-gray-600">
+                    السعر: {(250.75).toLocaleString(formData.numberFormat, {
+                      minimumFractionDigits: 2,
+                      maximumFractionDigits: 2
+                    })} {formData.currencySymbol}
+                  </p>
+                  <p className="text-sm text-gray-600">
+                    الكيلومترات: {(87500).toLocaleString(formData.numberFormat)} كم
+                  </p>
+                </div>
+                
+                <div className="bg-gray-50 p-4 rounded-lg">
+                  <h4 className="font-medium text-gray-900 mb-2">أرقام كبيرة</h4>
+                  <p className="text-sm text-gray-600">
+                    المبلغ الإجمالي: {(1234567.89).toLocaleString(formData.numberFormat, {
+                      minimumFractionDigits: 2,
+                      maximumFractionDigits: 2
+                    })} {formData.currencySymbol}
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </DashboardLayout>
+  );
+}