demo2

app/components/customers/CustomerList.tsx

@@ -196,7 +196,8 @@ export function CustomerList({
         </div>
       ) : (
         <>
-          <div className="overflow-x-auto">
+          {/* Desktop Table View */}
+          <div className="hidden lg:block overflow-x-auto">
             <table className="min-w-full divide-y divide-gray-200">
               <thead className="bg-gray-50">
                 <tr>
@@ -226,6 +227,96 @@ export function CustomerList({
               </tbody>
             </table>
           </div>
+
+          {/* Mobile Card View */}
+          <div className="lg:hidden divide-y divide-gray-200">
+            {customers.map((customer) => (
+              <div key={customer.id} className="p-4 hover:bg-gray-50">
+                <div className="space-y-3">
+                  <div className="flex justify-between items-start">
+                    <div className="flex-1">
+                      <div className="font-medium text-gray-900">{customer.name}</div>
+                      {customer.phone && (
+                        <div className="text-sm text-gray-600 mt-1" dir="ltr">
+                          📞 {customer.phone}
+                        </div>
+                      )}
+                      {customer.email && (
+                        <div className="text-sm text-gray-500 mt-1" dir="ltr">
+                          ✉️ {customer.email}
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                  
+                  {customer.address && (
+                    <div className="text-sm text-gray-600">
+                      <span className="font-medium">العنوان: </span>
+                      {customer.address}
+                    </div>
+                  )}
+                  
+                  <div className="flex gap-4 text-sm">
+                    <div>
+                      <span className="font-medium text-gray-700">المركبات: </span>
+                      <span className="text-gray-900">{customer.vehicles.length}</span>
+                    </div>
+                    <div>
+                      <span className="font-medium text-gray-700">الزيارات: </span>
+                      <span className="text-gray-900">{customer.maintenanceVisits.length}</span>
+                    </div>
+                  </div>
+                  
+                  <div className="text-xs text-gray-500">
+                    {formatDate(customer.createdDate)}
+                  </div>
+                  
+                  <Flex className="flex-wrap gap-2 pt-2">
+                    <Button
+                      size="sm"
+                      variant="outline"
+                      className="bg-blue-50 text-blue-600 border-blue-300 hover:bg-blue-100 flex-1 min-w-[80px]"
+                      disabled={isLoading}
+                      onClick={() => onViewCustomer(customer)}
+                    >
+                      عرض
+                    </Button>
+                    
+                    <Button
+                      size="sm"
+                      variant="outline"
+                      onClick={() => onEditCustomer(customer)}
+                      disabled={isLoading}
+                      className="flex-1 min-w-[80px]"
+                    >
+                      تعديل
+                    </Button>
+                    
+                    <Form method="post" className="flex-1 min-w-[80px]">
+                      <input type="hidden" name="_action" value="delete" />
+                      <input type="hidden" name="id" value={customer.id} />
+                      <Button
+                        type="submit"
+                        size="sm"
+                        variant="outline"
+                        className="text-red-600 border-red-300 hover:bg-red-50 w-full"
+                        disabled={isLoading || deletingCustomerId === customer.id}
+                        onClick={(e) => {
+                          e.preventDefault();
+                          if (window.confirm("هل أنت متأكد من حذف هذا العميل؟")) {
+                            setDeletingCustomerId(customer.id);
+                            (e.target as HTMLButtonElement).form?.submit();
+                          }
+                        }}
+                      >
+                        {deletingCustomerId === customer.id ? "جاري الحذف..." : "حذف"}
+                      </Button>
+                    </Form>
+                  </Flex>
+                </div>
+              </div>
+            ))}
+          </div>
           
           {/* Pagination */}
           {totalPages > 1 && (