Edit admin page

Edit home image
Added properties page

app/components/admin/UsersList.js

@@ -0,0 +1,190 @@
+'use client';
+
+import { useState } from 'react';
+import { motion } from 'framer-motion';
+import { 
+  User, 
+  Mail, 
+  Phone, 
+  Calendar,
+  Home,
+  DollarSign,
+  Search,
+  Filter,
+  Eye
+} from 'lucide-react';
+
+export default function UsersList() {
+  const [users, setUsers] = useState([
+    {
+      id: 1,
+      name: 'أحمد محمد',
+      email: 'ahmed@example.com',
+      phone: '0938123456',
+      identityType: 'syrian',
+      identityNumber: '123456789',
+      joinDate: '2024-01-15',
+      totalBookings: 3,
+      activeBookings: 1,
+      totalSpent: 1500000
+    },
+    {
+      id: 2,
+      name: 'سارة أحمد',
+      email: 'sara@example.com',
+      phone: '0945123789',
+      identityType: 'passport',
+      identityNumber: 'AB123456',
+      joinDate: '2024-02-10',
+      totalBookings: 2,
+      activeBookings: 0,
+      totalSpent: 500000
+    }
+  ]);
+
+  const [searchTerm, setSearchTerm] = useState('');
+  const [selectedUser, setSelectedUser] = useState(null);
+
+  const filteredUsers = users.filter(user =>
+    user.name.includes(searchTerm) || 
+    user.email.includes(searchTerm) ||
+    user.phone.includes(searchTerm)
+  );
+
+  return (
+    <div className="space-y-4">
+      <div className="flex gap-4">
+        <div className="flex-1 relative">
+          <Search className="absolute right-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
+          <input
+            type="text"
+            placeholder="بحث عن مستخدم..."
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            className="w-full pr-10 px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500"
+          />
+        </div>
+        <button className="px-4 py-2 border rounded-lg flex items-center gap-2 hover:bg-gray-50">
+          <Filter className="w-4 h-4" />
+          تصفية
+        </button>
+      </div>
+
+      <div className="space-y-3">
+        {filteredUsers.map((user, index) => (
+          <motion.div
+            key={user.id}
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: index * 0.1 }}
+            className="bg-white border rounded-lg p-4 hover:shadow-md transition-shadow"
+          >
+            <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
+              <div className="flex items-center gap-4">
+                <div className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center">
+                  <User className="w-6 h-6 text-blue-600" />
+                </div>
+                <div>
+                  <h3 className="font-bold">{user.name}</h3>
+                  <div className="flex flex-wrap gap-3 mt-1 text-sm text-gray-600">
+                    <div className="flex items-center gap-1">
+                      <Mail className="w-3 h-3" />
+                      {user.email}
+                    </div>
+                    <div className="flex items-center gap-1">
+                      <Phone className="w-3 h-3" />
+                      {user.phone}
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div className="flex gap-4">
+                <div className="text-center">
+                  <div className="text-lg font-bold text-blue-600">{user.totalBookings}</div>
+                  <div className="text-xs text-gray-500">إجمالي الحجوزات</div>
+                </div>
+                <div className="text-center">
+                  <div className="text-lg font-bold text-green-600">{user.activeBookings}</div>
+                  <div className="text-xs text-gray-500">حجوزات نشطة</div>
+                </div>
+                <div className="text-center">
+                  <div className="text-lg font-bold text-amber-600">
+                    {user.totalSpent.toLocaleString()}
+                  </div>
+                  <div className="text-xs text-gray-500">إجمالي المنصرف</div>
+                </div>
+              </div>
+
+              <button
+                onClick={() => setSelectedUser(user)}
+                className="px-3 py-1.5 bg-blue-600 text-white rounded-lg text-sm flex items-center gap-1 hover:bg-blue-700"
+              >
+                <Eye className="w-4 h-4" />
+                عرض التفاصيل
+              </button>
+            </div>
+          </motion.div>
+        ))}
+      </div>
+
+      {selectedUser && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50">
+          <motion.div
+            initial={{ opacity: 0, scale: 0.9 }}
+            animate={{ opacity: 1, scale: 1 }}
+            className="bg-white rounded-xl w-full max-w-2xl p-6"
+          >
+            <div className="flex justify-between items-center mb-4">
+              <h2 className="text-xl font-bold">تفاصيل المستخدم</h2>
+              <button
+                onClick={() => setSelectedUser(null)}
+                className="p-1 hover:bg-gray-100 rounded"
+              >
+                ✕
+              </button>
+            </div>
+
+            <div className="space-y-4">
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <label className="text-sm text-gray-500">الاسم</label>
+                  <div className="font-medium">{selectedUser.name}</div>
+                </div>
+                <div>
+                  <label className="text-sm text-gray-500">البريد الإلكتروني</label>
+                  <div className="font-medium">{selectedUser.email}</div>
+                </div>
+                <div>
+                  <label className="text-sm text-gray-500">رقم الهاتف</label>
+                  <div className="font-medium">{selectedUser.phone}</div>
+                </div>
+                <div>
+                  <label className="text-sm text-gray-500">نوع الهوية</label>
+                  <div className="font-medium">
+                    {selectedUser.identityType === 'syrian' ? 'هوية سورية' : 'جواز سفر'}
+                  </div>
+                </div>
+                <div>
+                  <label className="text-sm text-gray-500">رقم الهوية</label>
+                  <div className="font-medium">{selectedUser.identityNumber}</div>
+                </div>
+                <div>
+                  <label className="text-sm text-gray-500">تاريخ التسجيل</label>
+                  <div className="font-medium">{selectedUser.joinDate}</div>
+                </div>
+              </div>
+
+              <div className="border-t pt-4">
+                <h3 className="font-bold mb-3">سجل الحجوزات</h3>
+                <p className="text-gray-500 text-center py-4">
+                  لا توجد حجوزات سابقة
+                </p>
+              </div>
+            </div>
+          </motion.div>
+        </div>
+      )}
+    </div>
+  );
+}