myousry/fabritrack-erp
0
1<!DOCTYPE html>2<html lang="ar" dir="rtl">3<head>4 <meta charset="UTF-8" />5 <meta name="viewport" content="width=device-width, initial-scale=1.0"/>6 <title>أوامر التشغيل والموديلات</title>7 <script src="https://cdn.tailwindcss.com"></script>8 <script src="https://unpkg.com/feather-icons"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10 <style>11 body {12 font-family: 'Tajawal', sans-serif;13 }14 </style>15 <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;700&display=swap" rel="stylesheet">16</head>17<body class="bg-gray-50 text-gray-800">18 <!-- Header -->19 <header class="bg-white shadow p-4 flex flex-wrap justify-between items-center gap-4">20 <h1 class="text-2xl font-bold"> أوامر التشغيل والموديلات </h1>21 <div class="flex gap-2">22 <button class="bg-blue-600 text-white px-4 py-2 rounded-lg text-sm">إضافة موديل</button>23 <button class="bg-indigo-600 text-white px-4 py-2 rounded-lg text-sm">استيراد من Excel</button>24 </div>25 </header>26 27 <!-- Filters -->28 <section class="p-4 flex flex-wrap gap-3">29 <input type="text" placeholder="رقم الموديل" class="border rounded p-2 w-40" />30 <input type="text" placeholder="الوصف" class="border rounded p-2 w-40" />31 <input type="text" placeholder="اللون" class="border rounded p-2 w-40" />32 <input type="text" placeholder="المقاس" class="border rounded p-2 w-40" />33 <select class="border rounded p-2 w-40">34 <option>المرحلة الحالية</option>35 <option>القص</option>36 <option>كنترول بعد القص</option>37 <option>طباعة</option>38 <option>تطريز</option>39 <option>خياطة</option>40 <option>تعبئة</option>41 </select>42 </section>43 44 <!-- Models Table -->45 <section class="p-4">46 <div class="bg-white shadow rounded-lg overflow-x-auto">47 <table class="min-w-full text-right">48 <thead class="bg-gray-100">49 <tr>50 <th class="py-2 px-4">رقم الموديل</th>51 <th class="py-2 px-4">الوصف</th>52 <th class="py-2 px-4">اللون</th>53 <th class="py-2 px-4">المقاس</th>54 <th class="py-2 px-4">كمية التشغيل</th>55 <th class="py-2 px-4">المرحلة الحالية</th>56 <th class="py-2 px-4">نسبة الإنجاز</th>57 <th class="py-2 px-4">إجراءات</th>58 </tr>59 </thead>60 <tbody>61 <tr class="border-b hover:bg-gray-50">62 <td class="py-2 px-4 font-bold">M1001</td>63 <td class="py-2 px-4">قميص رجالي</td>64 <td class="py-2 px-4">أزرق</td>65 <td class="py-2 px-4">L</td>66 <td class="py-2 px-4">100,000</td>67 <td class="py-2 px-4">طباعة</td>68 <td class="py-2 px-4">65%</td>69 <td class="py-2 px-4 space-x-1">70 <button class="bg-gray-200 px-2 py-1 rounded text-sm">عرض البطاقة</button>71 <button class="bg-gray-200 px-2 py-1 rounded text-sm">تفاصيل المراحل</button>72 <button class="bg-gray-200 px-2 py-1 rounded text-sm">إدخال مرحلة</button>73 <button class="bg-gray-200 px-2 py-1 rounded text-sm">طباعة</button>74 <button class="bg-gray-200 px-2 py-1 rounded text-sm">تصدير</button>75 </td>76 </tr>77 <tr class="border-b hover:bg-gray-50">78 <td class="py-2 px-4 font-bold">M2015</td>79 <td class="py-2 px-4">بنطال نسائي</td>80 <td class="py-2 px-4">أسود</td>81 <td class="py-2 px-4">M</td>82 <td class="py-2 px-4">75,000</td>83 <td class="py-2 px-4">تطريز</td>84 <td class="py-2 px-4">45%</td>85 <td class="py-2 px-4 space-x-1">86 <button class="bg-gray-200 px-2 py-1 rounded text-sm">عرض البطاقة</button>87 <button class="bg-gray-200 px-2 py-1 rounded text-sm">تفاصيل المراحل</button>88 <button class="bg-gray-200 px-2 py-1 rounded text-sm">إدخال مرحلة</button>89 <button class="bg-gray-200 px-2 py-1 rounded text-sm">طباعة</button>90 <button class="bg-gray-200 px-2 py-1 rounded text-sm">تصدير</button>91 </td>92 </tr>93 </tbody>94 </table>95 </div>96 97 <!-- Pagination -->98 <div class="mt-4 flex justify-between items-center">99 <p class="text-sm text-gray-600">إظهار 1-10 من 150 موديل</p>100 <div class="flex gap-2">101 <button class="border px-3 py-1 rounded">1</button>102 <button class="border px-3 py-1 rounded bg-blue-500 text-white">2</button>103 <button class="border px-3 py-1 rounded">3</button>104 <button class="border px-3 py-1 rounded">التالي</button>105 </div>106 </div>107 </section>108 109 <script>feather.replace();</script>110</body>111</html>112