yatra / resources / js / components / availability / RecurringRuleFormSkeleton.tsx

RecurringRuleFormSkeleton.tsx in Yatra – Travel Booking & Tour Operator Software 3.0.15, at resources/js/components/availability/RecurringRuleFormSkeleton.tsx

247 lines 11.1 KB

Raw Download Zip

1	/**
2	* Skeleton Loader for RecurringRuleForm
3	* Shows a skeleton UI while the form data is loading
4	*/
5
6	import React from "react";
7	import { Card, CardContent, CardHeader } from "../ui/card";
8
9	export const RecurringRuleFormSkeleton: React.FC = () => {
10	return (
11	<div className="space-y-6">
12	{/* Header Skeleton */}
13	<div className="animate-pulse">
14	<div className="flex items-center justify-between mb-4">
15	<div>
16	<div className="h-8 bg-gray-200 dark:bg-gray-700 rounded w-64 mb-2"></div>
17	<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-96"></div>
18	</div>
19	<div className="h-10 bg-gray-200 dark:bg-gray-700 rounded w-40"></div>
20	</div>
21	</div>
22
23	{/* Form Skeleton */}
24	<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
25	{/* Main Form */}
26	<div className="lg:col-span-2 space-y-6">
27	{/* Basic Info Card */}
28	<Card>
29	<CardHeader>
30	<div className="h-6 bg-gray-200 dark:bg-gray-700 rounded w-40 animate-pulse"></div>
31	</CardHeader>
32	<CardContent className="space-y-4">
33	<div className="grid grid-cols-1 md:grid-cols-2 gap-4 animate-pulse">
34	<div className="space-y-2">
35	<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-16"></div>
36	<div className="h-10 bg-gray-200 dark:bg-gray-700 rounded"></div>
37	</div>
38	<div className="space-y-2">
39	<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-24"></div>
40	<div className="h-10 bg-gray-200 dark:bg-gray-700 rounded"></div>
41	</div>
42	</div>
43	<div className="space-y-2 animate-pulse">
44	<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-20"></div>
45	<div className="h-10 bg-gray-200 dark:bg-gray-700 rounded"></div>
46	</div>
47	</CardContent>
48	</Card>
49
50	{/* Recurrence Pattern Card */}
51	<Card>
52	<CardHeader>
53	<div className="flex items-center gap-2 animate-pulse">
54	<div className="h-5 w-5 bg-gray-200 dark:bg-gray-700 rounded"></div>
55	<div className="h-6 bg-gray-200 dark:bg-gray-700 rounded w-44"></div>
56	</div>
57	</CardHeader>
58	<CardContent className="space-y-4">
59	{/* Days of Week */}
60	<div className="animate-pulse">
61	<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-28 mb-3"></div>
62	<div className="flex flex-wrap gap-2">
63	{[...Array(7)].map((_, i) => (
64	<div
65	key={i}
66	className="h-10 bg-gray-200 dark:bg-gray-700 rounded w-24"
67	></div>
68	))}
69	</div>
70	</div>
71
72	{/* Date Range */}
73	<div className="grid grid-cols-1 md:grid-cols-2 gap-4 pt-4 border-t border-gray-200 dark:border-gray-700 animate-pulse">
74	<div className="space-y-2">
75	<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-24"></div>
76	<div className="h-10 bg-gray-200 dark:bg-gray-700 rounded"></div>
77	</div>
78	<div className="space-y-2">
79	<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-20"></div>
80	<div className="h-10 bg-gray-200 dark:bg-gray-700 rounded"></div>
81	</div>
82	</div>
83
84	{/* Excluded Dates */}
85	<div className="pt-4 border-t border-gray-200 dark:border-gray-700 animate-pulse">
86	<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-32 mb-2"></div>
87	<div className="flex gap-2 mb-2">
88	<div className="flex-1 h-10 bg-gray-200 dark:bg-gray-700 rounded"></div>
89	<div className="h-10 w-10 bg-gray-200 dark:bg-gray-700 rounded"></div>
90	</div>
91	</div>
92	</CardContent>
93	</Card>
94
95	{/* Pricing & Availability Card */}
96	<Card>
97	<CardHeader>
98	<div className="flex items-center gap-2 animate-pulse">
99	<div className="h-5 w-5 bg-gray-200 dark:bg-gray-700 rounded"></div>
100	<div className="h-6 bg-gray-200 dark:bg-gray-700 rounded w-44"></div>
101	</div>
102	<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-80 mt-2 animate-pulse"></div>
103	</CardHeader>
104	<CardContent className="space-y-6">
105	{/* Pricing Type Info */}
106	<div className="p-4 bg-gray-100 dark:bg-gray-800/50 rounded-lg animate-pulse">
107	<div className="flex items-center gap-3">
108	<div className="h-9 w-9 bg-gray-200 dark:bg-gray-700 rounded-full"></div>
109	<div className="flex-1">
110	<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-40 mb-2"></div>
111	<div className="h-3 bg-gray-200 dark:bg-gray-700 rounded w-72"></div>
112	</div>
113	</div>
114	</div>
115
116	{/* Price Fields */}
117	<div className="grid grid-cols-1 md:grid-cols-2 gap-4 animate-pulse">
118	<div className="space-y-2">
119	<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-28"></div>
120	<div className="h-10 bg-gray-200 dark:bg-gray-700 rounded"></div>
121	</div>
122	<div className="space-y-2">
123	<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-24"></div>
124	<div className="h-10 bg-gray-200 dark:bg-gray-700 rounded"></div>
125	</div>
126	</div>
127
128	{/* Inventory Management */}
129	<div className="pt-4 border-t border-gray-200 dark:border-gray-700 animate-pulse">
130	<div className="h-5 bg-gray-200 dark:bg-gray-700 rounded w-44 mb-4"></div>
131	<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
132	<div className="space-y-2">
133	<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-28"></div>
134	<div className="h-10 bg-gray-200 dark:bg-gray-700 rounded"></div>
135	</div>
136	<div className="space-y-2">
137	<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-32"></div>
138	<div className="h-10 bg-gray-200 dark:bg-gray-700 rounded"></div>
139	</div>
140	</div>
141	</div>
142	</CardContent>
143	</Card>
144
145	{/* Time & Location Card */}
146	<Card>
147	<CardHeader>
148	<div className="flex items-center gap-2 animate-pulse">
149	<div className="h-5 w-5 bg-gray-200 dark:bg-gray-700 rounded"></div>
150	<div className="h-6 bg-gray-200 dark:bg-gray-700 rounded w-36"></div>
151	</div>
152	<div className="flex gap-2 mt-2 animate-pulse">
153	<div className="h-5 bg-gray-200 dark:bg-gray-700 rounded w-28"></div>
154	</div>
155	</CardHeader>
156	<CardContent className="space-y-4">
157	{/* Time Slots Header */}
158	<div className="flex items-center justify-between animate-pulse">
159	<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-24"></div>
160	<div className="h-8 bg-gray-200 dark:bg-gray-700 rounded w-24"></div>
161	</div>
162
163	{/* Empty Time Slots Placeholder */}
164	<div className="text-center py-6 bg-gray-50 dark:bg-gray-800 rounded-lg border-2 border-dashed border-gray-200 dark:border-gray-700 animate-pulse">
165	<div className="h-8 w-8 bg-gray-200 dark:bg-gray-700 rounded mx-auto mb-2"></div>
166	<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-36 mx-auto mb-2"></div>
167	<div className="h-3 bg-gray-200 dark:bg-gray-700 rounded w-64 mx-auto"></div>
168	</div>
169
170	{/* Location Fields */}
171	<div className="grid grid-cols-1 md:grid-cols-2 gap-4 pt-4 border-t border-gray-200 dark:border-gray-700 animate-pulse">
172	<div className="space-y-2">
173	<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-28"></div>
174	<div className="h-10 bg-gray-200 dark:bg-gray-700 rounded"></div>
175	</div>
176	<div className="space-y-2">
177	<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-24"></div>
178	<div className="h-10 bg-gray-200 dark:bg-gray-700 rounded"></div>
179	</div>
180	</div>
181
182	{/* Cutoff Hours */}
183	<div className="animate-pulse">
184	<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-48 mb-2"></div>
185	<div className="h-10 bg-gray-200 dark:bg-gray-700 rounded"></div>
186	</div>
187	</CardContent>
188	</Card>
189	</div>
190
191	{/* Sidebar */}
192	<div className="space-y-6">
193	{/* Status Card */}
194	<Card>
195	<CardHeader>
196	<div className="h-6 bg-gray-200 dark:bg-gray-700 rounded w-16 animate-pulse"></div>
197	</CardHeader>
198	<CardContent>
199	<div className="h-10 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
200	</CardContent>
201	</Card>
202
203	{/* Preview Card */}
204	<Card>
205	<CardHeader>
206	<div className="flex items-center gap-2 animate-pulse">
207	<div className="h-5 w-5 bg-gray-200 dark:bg-gray-700 rounded"></div>
208	<div className="h-6 bg-gray-200 dark:bg-gray-700 rounded w-20"></div>
209	</div>
210	<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-48 mt-2 animate-pulse"></div>
211	</CardHeader>
212	<CardContent>
213	<div className="h-10 bg-gray-200 dark:bg-gray-700 rounded w-full mb-4 animate-pulse"></div>
214	<div className="space-y-2 animate-pulse">
215	{[...Array(5)].map((_, i) => (
216	<div
217	key={i}
218	className="h-6 bg-gray-200 dark:bg-gray-700 rounded"
219	></div>
220	))}
221	</div>
222	</CardContent>
223	</Card>
224
225	{/* Actions Card */}
226	<Card>
227	<CardContent className="pt-6">
228	<div className="space-y-3 animate-pulse">
229	<div className="h-10 bg-gray-200 dark:bg-gray-700 rounded"></div>
230	<div className="h-10 bg-gray-200 dark:bg-gray-700 rounded"></div>
231	</div>
232	</CardContent>
233	</Card>
234
235	{/* Help Alert */}
236	<div className="p-4 bg-gray-100 dark:bg-gray-800/50 rounded-lg border border-gray-200 dark:border-gray-700 animate-pulse">
237	<div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-24 mb-2"></div>
238	<div className="h-12 bg-gray-200 dark:bg-gray-700 rounded"></div>
239	</div>
240	</div>
241	</div>
242	</div>
243	);
244	};
245
246	export default RecurringRuleFormSkeleton;
247