@burdenoff/microfe-proserviceworld 2026.525.1 → 2026.624.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/proserviceworld/pages/AdminReportsPage.js +28 -28
- package/dist/proserviceworld/pages/AdminReportsPage.js.map +1 -1
- package/dist/proserviceworld/pages/AdminUsersPage.js +19 -19
- package/dist/proserviceworld/pages/AdminUsersPage.js.map +1 -1
- package/dist/proserviceworld/pages/AnalyticsPage.js +27 -27
- package/dist/proserviceworld/pages/AnalyticsPage.js.map +1 -1
- package/dist/proserviceworld/pages/BookingsPage.js +24 -24
- package/dist/proserviceworld/pages/BookingsPage.js.map +1 -1
- package/dist/proserviceworld/pages/DashboardPage.js +33 -33
- package/dist/proserviceworld/pages/DashboardPage.js.map +1 -1
- package/dist/proserviceworld/pages/DocumentsPage.js +29 -29
- package/dist/proserviceworld/pages/DocumentsPage.js.map +1 -1
- package/dist/proserviceworld/pages/MessagesPage.js +15 -15
- package/dist/proserviceworld/pages/MessagesPage.js.map +1 -1
- package/dist/proserviceworld/pages/PaymentsPage.js +19 -19
- package/dist/proserviceworld/pages/PaymentsPage.js.map +1 -1
- package/dist/proserviceworld/pages/ProjectsPage.js +36 -36
- package/dist/proserviceworld/pages/ProjectsPage.js.map +1 -1
- package/dist/proserviceworld/pages/ProviderDetailPage.js +36 -36
- package/dist/proserviceworld/pages/ProviderDetailPage.js.map +1 -1
- package/dist/proserviceworld/pages/ProvidersPage.js +19 -19
- package/dist/proserviceworld/pages/ProvidersPage.js.map +1 -1
- package/dist/proserviceworld/pages/ReviewsPage.js +22 -22
- package/dist/proserviceworld/pages/ReviewsPage.js.map +1 -1
- package/dist/proserviceworld/pages/ServiceDetailsPage.js +35 -35
- package/dist/proserviceworld/pages/ServiceDetailsPage.js.map +1 -1
- package/dist/proserviceworld/pages/ServicesPage.js +14 -14
- package/dist/proserviceworld/pages/ServicesPage.js.map +1 -1
- package/dist/proserviceworld/pages/VerificationPage.js +23 -23
- package/dist/proserviceworld/pages/VerificationPage.js.map +1 -1
- package/package.json +1 -1
|
@@ -9,7 +9,7 @@ function E() {
|
|
|
9
9
|
if (!R) return /* @__PURE__ */ v("div", {
|
|
10
10
|
className: "flex items-center justify-center p-12",
|
|
11
11
|
children: /* @__PURE__ */ v("p", {
|
|
12
|
-
className: "text-
|
|
12
|
+
className: "text-text-secondary",
|
|
13
13
|
children: "No services available."
|
|
14
14
|
})
|
|
15
15
|
});
|
|
@@ -50,11 +50,11 @@ function E() {
|
|
|
50
50
|
children: [/* @__PURE__ */ v(n, { className: "mr-2 h-4 w-4" }), " Services"]
|
|
51
51
|
}),
|
|
52
52
|
/* @__PURE__ */ v("span", {
|
|
53
|
-
className: "text-
|
|
53
|
+
className: "text-text-secondary",
|
|
54
54
|
children: "/"
|
|
55
55
|
}),
|
|
56
56
|
/* @__PURE__ */ v("select", {
|
|
57
|
-
className: "rounded border bg-
|
|
57
|
+
className: "rounded border bg-bg-surface px-2 py-1 text-sm",
|
|
58
58
|
value: O,
|
|
59
59
|
onChange: (e) => k(e.target.value),
|
|
60
60
|
children: E.map((e) => /* @__PURE__ */ v("option", {
|
|
@@ -101,7 +101,7 @@ function E() {
|
|
|
101
101
|
children: R.title
|
|
102
102
|
}),
|
|
103
103
|
/* @__PURE__ */ v("p", {
|
|
104
|
-
className: "max-w-2xl text-
|
|
104
|
+
className: "max-w-2xl text-text-secondary",
|
|
105
105
|
children: R.description
|
|
106
106
|
})
|
|
107
107
|
]
|
|
@@ -111,7 +111,7 @@ function E() {
|
|
|
111
111
|
className: "text-2xl font-bold text-primary",
|
|
112
112
|
children: V
|
|
113
113
|
}), /* @__PURE__ */ y("p", {
|
|
114
|
-
className: "text-xs text-
|
|
114
|
+
className: "text-xs text-text-secondary",
|
|
115
115
|
children: [R.pricing.type, " pricing"]
|
|
116
116
|
})]
|
|
117
117
|
})]
|
|
@@ -128,7 +128,7 @@ function E() {
|
|
|
128
128
|
children: R.rating
|
|
129
129
|
}),
|
|
130
130
|
/* @__PURE__ */ y("span", {
|
|
131
|
-
className: "text-xs text-
|
|
131
|
+
className: "text-xs text-text-secondary",
|
|
132
132
|
children: [
|
|
133
133
|
"(",
|
|
134
134
|
R.providerReviews,
|
|
@@ -139,7 +139,7 @@ function E() {
|
|
|
139
139
|
}),
|
|
140
140
|
/* @__PURE__ */ y("div", {
|
|
141
141
|
className: "flex items-center gap-2",
|
|
142
|
-
children: [/* @__PURE__ */ v(l, { className: "h-4 w-4 text-
|
|
142
|
+
children: [/* @__PURE__ */ v(l, { className: "h-4 w-4 text-text-secondary" }), /* @__PURE__ */ y("span", {
|
|
143
143
|
className: "text-sm",
|
|
144
144
|
children: [R.duration.typical, " days typical"]
|
|
145
145
|
})]
|
|
@@ -153,7 +153,7 @@ function E() {
|
|
|
153
153
|
}),
|
|
154
154
|
/* @__PURE__ */ y("div", {
|
|
155
155
|
className: "flex items-center gap-2",
|
|
156
|
-
children: [/* @__PURE__ */ v(i, { className: "h-4 w-4 text-
|
|
156
|
+
children: [/* @__PURE__ */ v(i, { className: "h-4 w-4 text-text-secondary" }), /* @__PURE__ */ y("span", {
|
|
157
157
|
className: "text-sm",
|
|
158
158
|
children: [
|
|
159
159
|
R.duration.min,
|
|
@@ -167,7 +167,7 @@ function E() {
|
|
|
167
167
|
}),
|
|
168
168
|
R.tags.length > 0 && /* @__PURE__ */ y("div", {
|
|
169
169
|
className: "mt-4 flex flex-wrap gap-2",
|
|
170
|
-
children: [/* @__PURE__ */ v(g, { className: "h-4 w-4 text-
|
|
170
|
+
children: [/* @__PURE__ */ v(g, { className: "h-4 w-4 text-text-secondary" }), R.tags.map((e) => /* @__PURE__ */ v(b, {
|
|
171
171
|
variant: "outline",
|
|
172
172
|
className: "text-xs",
|
|
173
173
|
children: e
|
|
@@ -179,19 +179,19 @@ function E() {
|
|
|
179
179
|
className: "flex gap-1 border-b",
|
|
180
180
|
children: B.map(({ key: e, label: t, icon: n }) => /* @__PURE__ */ y("button", {
|
|
181
181
|
onClick: () => j(e),
|
|
182
|
-
className: `flex items-center gap-2 border-b-2 px-4 py-2 text-sm font-medium transition-colors ${A === e ? "border-primary text-primary" : "border-transparent text-
|
|
182
|
+
className: `flex items-center gap-2 border-b-2 px-4 py-2 text-sm font-medium transition-colors ${A === e ? "border-primary text-primary" : "border-transparent text-text-secondary hover:text-text-primary"}`,
|
|
183
183
|
children: [/* @__PURE__ */ v(n, { className: "h-4 w-4" }), t]
|
|
184
184
|
}, e))
|
|
185
185
|
}),
|
|
186
186
|
A === "packages" && /* @__PURE__ */ v("div", {
|
|
187
187
|
className: "grid gap-4 md:grid-cols-2 lg:grid-cols-3",
|
|
188
188
|
children: R.packages.map((e) => /* @__PURE__ */ y(S, {
|
|
189
|
-
className: `relative ${e.popular ? "border-primary ring-1 ring-primary" : ""} ${I === e.id ? "bg-primary/5" : ""}`,
|
|
189
|
+
className: `relative ${e.popular ? "border-primary ring-1 ring-primary" : ""} ${I === e.id ? "bg-action-primary-bg/5" : ""}`,
|
|
190
190
|
children: [
|
|
191
191
|
e.popular && /* @__PURE__ */ v("div", {
|
|
192
192
|
className: "absolute -top-3 left-1/2 -translate-x-1/2",
|
|
193
193
|
children: /* @__PURE__ */ v(b, {
|
|
194
|
-
className: "bg-primary text-primary-
|
|
194
|
+
className: "bg-action-primary-bg text-action-primary-text",
|
|
195
195
|
children: "Most Popular"
|
|
196
196
|
})
|
|
197
197
|
}),
|
|
@@ -201,7 +201,7 @@ function E() {
|
|
|
201
201
|
className: "text-lg",
|
|
202
202
|
children: e.name
|
|
203
203
|
}), /* @__PURE__ */ v("p", {
|
|
204
|
-
className: "text-sm text-
|
|
204
|
+
className: "text-sm text-text-secondary",
|
|
205
205
|
children: e.description
|
|
206
206
|
})]
|
|
207
207
|
}),
|
|
@@ -212,7 +212,7 @@ function E() {
|
|
|
212
212
|
className: "text-3xl font-bold",
|
|
213
213
|
children: ["$", e.price.toLocaleString()]
|
|
214
214
|
}), /* @__PURE__ */ y("span", {
|
|
215
|
-
className: "text-sm text-
|
|
215
|
+
className: "text-sm text-text-secondary",
|
|
216
216
|
children: [
|
|
217
217
|
" / ",
|
|
218
218
|
e.duration,
|
|
@@ -268,7 +268,7 @@ function E() {
|
|
|
268
268
|
A === "faq" && /* @__PURE__ */ v("div", {
|
|
269
269
|
className: "space-y-3",
|
|
270
270
|
children: R.faq.length === 0 ? /* @__PURE__ */ v(S, { children: /* @__PURE__ */ v(C, {
|
|
271
|
-
className: "py-8 text-center text-
|
|
271
|
+
className: "py-8 text-center text-text-secondary",
|
|
272
272
|
children: "No FAQ items for this service yet."
|
|
273
273
|
}) }) : R.faq.map((e) => /* @__PURE__ */ y(S, { children: [/* @__PURE__ */ y("button", {
|
|
274
274
|
className: "flex w-full items-center justify-between p-4 text-left",
|
|
@@ -276,11 +276,11 @@ function E() {
|
|
|
276
276
|
children: [/* @__PURE__ */ v("span", {
|
|
277
277
|
className: "font-medium",
|
|
278
278
|
children: e.question
|
|
279
|
-
}), M === e.id ? /* @__PURE__ */ v(s, { className: "h-4 w-4 text-
|
|
279
|
+
}), M === e.id ? /* @__PURE__ */ v(s, { className: "h-4 w-4 text-text-secondary" }) : /* @__PURE__ */ v(o, { className: "h-4 w-4 text-text-secondary" })]
|
|
280
280
|
}), M === e.id && /* @__PURE__ */ v(C, {
|
|
281
281
|
className: "border-t pt-4",
|
|
282
282
|
children: /* @__PURE__ */ v("p", {
|
|
283
|
-
className: "text-sm text-
|
|
283
|
+
className: "text-sm text-text-secondary",
|
|
284
284
|
children: e.answer
|
|
285
285
|
})
|
|
286
286
|
})] }, e.id))
|
|
@@ -297,13 +297,13 @@ function E() {
|
|
|
297
297
|
/* @__PURE__ */ y("div", {
|
|
298
298
|
className: "flex items-center gap-3",
|
|
299
299
|
children: [/* @__PURE__ */ v("div", {
|
|
300
|
-
className: "flex h-12 w-12 items-center justify-center rounded-full bg-primary/10 text-primary font-semibold",
|
|
300
|
+
className: "flex h-12 w-12 items-center justify-center rounded-full bg-action-primary-bg/10 text-primary font-semibold",
|
|
301
301
|
children: z.name.charAt(0)
|
|
302
302
|
}), /* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("p", {
|
|
303
303
|
className: "font-medium",
|
|
304
304
|
children: z.name
|
|
305
305
|
}), /* @__PURE__ */ v("p", {
|
|
306
|
-
className: "text-sm text-
|
|
306
|
+
className: "text-sm text-text-secondary",
|
|
307
307
|
children: z.businessName
|
|
308
308
|
})] })]
|
|
309
309
|
}),
|
|
@@ -320,7 +320,7 @@ function E() {
|
|
|
320
320
|
/* @__PURE__ */ y("div", {
|
|
321
321
|
className: "flex items-center justify-between",
|
|
322
322
|
children: [/* @__PURE__ */ v("span", {
|
|
323
|
-
className: "text-
|
|
323
|
+
className: "text-text-secondary",
|
|
324
324
|
children: "Rating"
|
|
325
325
|
}), /* @__PURE__ */ y("div", {
|
|
326
326
|
className: "flex items-center gap-1",
|
|
@@ -331,7 +331,7 @@ function E() {
|
|
|
331
331
|
children: z.rating
|
|
332
332
|
}),
|
|
333
333
|
/* @__PURE__ */ y("span", {
|
|
334
|
-
className: "text-
|
|
334
|
+
className: "text-text-secondary",
|
|
335
335
|
children: [
|
|
336
336
|
"(",
|
|
337
337
|
z.totalReviews,
|
|
@@ -344,7 +344,7 @@ function E() {
|
|
|
344
344
|
/* @__PURE__ */ y("div", {
|
|
345
345
|
className: "flex items-center justify-between",
|
|
346
346
|
children: [/* @__PURE__ */ v("span", {
|
|
347
|
-
className: "text-
|
|
347
|
+
className: "text-text-secondary",
|
|
348
348
|
children: "Completion Rate"
|
|
349
349
|
}), /* @__PURE__ */ y("span", {
|
|
350
350
|
className: "font-medium",
|
|
@@ -354,7 +354,7 @@ function E() {
|
|
|
354
354
|
/* @__PURE__ */ y("div", {
|
|
355
355
|
className: "flex items-center justify-between",
|
|
356
356
|
children: [/* @__PURE__ */ v("span", {
|
|
357
|
-
className: "text-
|
|
357
|
+
className: "text-text-secondary",
|
|
358
358
|
children: "Response Time"
|
|
359
359
|
}), /* @__PURE__ */ y("span", {
|
|
360
360
|
className: "font-medium",
|
|
@@ -364,7 +364,7 @@ function E() {
|
|
|
364
364
|
/* @__PURE__ */ y("div", {
|
|
365
365
|
className: "flex items-center justify-between",
|
|
366
366
|
children: [/* @__PURE__ */ v("span", {
|
|
367
|
-
className: "text-
|
|
367
|
+
className: "text-text-secondary",
|
|
368
368
|
children: "Experience"
|
|
369
369
|
}), /* @__PURE__ */ y("span", {
|
|
370
370
|
className: "font-medium",
|
|
@@ -374,7 +374,7 @@ function E() {
|
|
|
374
374
|
/* @__PURE__ */ y("div", {
|
|
375
375
|
className: "flex items-center justify-between",
|
|
376
376
|
children: [/* @__PURE__ */ v("span", {
|
|
377
|
-
className: "text-
|
|
377
|
+
className: "text-text-secondary",
|
|
378
378
|
children: "Projects Done"
|
|
379
379
|
}), /* @__PURE__ */ v("span", {
|
|
380
380
|
className: "font-medium",
|
|
@@ -384,7 +384,7 @@ function E() {
|
|
|
384
384
|
/* @__PURE__ */ y("div", {
|
|
385
385
|
className: "flex items-center justify-between",
|
|
386
386
|
children: [/* @__PURE__ */ v("span", {
|
|
387
|
-
className: "text-
|
|
387
|
+
className: "text-text-secondary",
|
|
388
388
|
children: "Hourly Rate"
|
|
389
389
|
}), /* @__PURE__ */ y("span", {
|
|
390
390
|
className: "font-medium",
|
|
@@ -398,7 +398,7 @@ function E() {
|
|
|
398
398
|
/* @__PURE__ */ y("div", {
|
|
399
399
|
className: "flex items-center justify-between",
|
|
400
400
|
children: [/* @__PURE__ */ v("span", {
|
|
401
|
-
className: "text-
|
|
401
|
+
className: "text-text-secondary",
|
|
402
402
|
children: "Location"
|
|
403
403
|
}), /* @__PURE__ */ v("span", {
|
|
404
404
|
className: "font-medium",
|
|
@@ -410,7 +410,7 @@ function E() {
|
|
|
410
410
|
/* @__PURE__ */ y("div", {
|
|
411
411
|
className: "space-y-2 border-t pt-3",
|
|
412
412
|
children: [/* @__PURE__ */ v("p", {
|
|
413
|
-
className: "text-xs font-medium text-
|
|
413
|
+
className: "text-xs font-medium text-text-secondary",
|
|
414
414
|
children: "Certifications"
|
|
415
415
|
}), /* @__PURE__ */ v("div", {
|
|
416
416
|
className: "flex flex-wrap gap-1",
|
|
@@ -424,7 +424,7 @@ function E() {
|
|
|
424
424
|
/* @__PURE__ */ y("div", {
|
|
425
425
|
className: "space-y-2 border-t pt-3",
|
|
426
426
|
children: [/* @__PURE__ */ v("p", {
|
|
427
|
-
className: "text-xs font-medium text-
|
|
427
|
+
className: "text-xs font-medium text-text-secondary",
|
|
428
428
|
children: "Languages"
|
|
429
429
|
}), /* @__PURE__ */ v("div", {
|
|
430
430
|
className: "flex flex-wrap gap-1",
|
|
@@ -459,7 +459,7 @@ function E() {
|
|
|
459
459
|
/* @__PURE__ */ y("div", {
|
|
460
460
|
className: "flex items-center justify-between text-sm",
|
|
461
461
|
children: [/* @__PURE__ */ v("span", {
|
|
462
|
-
className: "text-
|
|
462
|
+
className: "text-text-secondary",
|
|
463
463
|
children: "Starting from"
|
|
464
464
|
}), /* @__PURE__ */ y("span", {
|
|
465
465
|
className: "text-lg font-bold text-primary",
|
|
@@ -467,7 +467,7 @@ function E() {
|
|
|
467
467
|
})]
|
|
468
468
|
}),
|
|
469
469
|
/* @__PURE__ */ y("div", {
|
|
470
|
-
className: "flex items-center gap-2 text-sm text-
|
|
470
|
+
className: "flex items-center gap-2 text-sm text-text-secondary",
|
|
471
471
|
children: [/* @__PURE__ */ v(l, { className: "h-4 w-4" }), /* @__PURE__ */ y("span", { children: [
|
|
472
472
|
"Typical duration: ",
|
|
473
473
|
R.duration.typical,
|
|
@@ -475,7 +475,7 @@ function E() {
|
|
|
475
475
|
] })]
|
|
476
476
|
}),
|
|
477
477
|
/* @__PURE__ */ y("div", {
|
|
478
|
-
className: "flex items-center gap-2 text-sm text-
|
|
478
|
+
className: "flex items-center gap-2 text-sm text-text-secondary",
|
|
479
479
|
children: [/* @__PURE__ */ v(u, { className: "h-4 w-4" }), /* @__PURE__ */ y("span", { children: [R.pricing.type, " pricing model"] })]
|
|
480
480
|
}),
|
|
481
481
|
/* @__PURE__ */ y(x, {
|
|
@@ -506,7 +506,7 @@ function E() {
|
|
|
506
506
|
className: "font-medium",
|
|
507
507
|
children: R.title
|
|
508
508
|
}), /* @__PURE__ */ y("p", {
|
|
509
|
-
className: "text-sm text-
|
|
509
|
+
className: "text-sm text-text-secondary",
|
|
510
510
|
children: ["by ", R.providerName]
|
|
511
511
|
})] }),
|
|
512
512
|
/* @__PURE__ */ y("div", {
|
|
@@ -516,7 +516,7 @@ function E() {
|
|
|
516
516
|
children: "Select Package"
|
|
517
517
|
}), R.packages.map((e) => /* @__PURE__ */ y("button", {
|
|
518
518
|
onClick: () => L(e.id),
|
|
519
|
-
className: `w-full rounded-lg border p-3 text-left transition-colors ${I === e.id ? "border-primary bg-primary/5" : "hover:bg-
|
|
519
|
+
className: `w-full rounded-lg border p-3 text-left transition-colors ${I === e.id ? "border-primary bg-action-primary-bg/5" : "hover:bg-bg-sunken/50"}`,
|
|
520
520
|
children: [/* @__PURE__ */ y("div", {
|
|
521
521
|
className: "flex items-center justify-between",
|
|
522
522
|
children: [/* @__PURE__ */ v("span", {
|
|
@@ -527,7 +527,7 @@ function E() {
|
|
|
527
527
|
children: ["$", e.price.toLocaleString()]
|
|
528
528
|
})]
|
|
529
529
|
}), /* @__PURE__ */ y("p", {
|
|
530
|
-
className: "text-xs text-
|
|
530
|
+
className: "text-xs text-text-secondary",
|
|
531
531
|
children: [
|
|
532
532
|
e.description,
|
|
533
533
|
" - ",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ServiceDetailsPage.js","names":[],"sources":["../../../src/proserviceworld/pages/ServiceDetailsPage.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { Badge, Button, Card, CardContent, CardHeader, CardTitle } from '@burdenoff/fe-libs/ui';\nimport {\n ArrowLeft,\n Star,\n Clock,\n CheckCircle2,\n ChevronDown,\n ChevronUp,\n Package,\n FileText,\n ClipboardList,\n Tag,\n Shield,\n Calendar,\n DollarSign,\n User,\n MessageSquare,\n BookOpen,\n} from 'lucide-react';\nimport { useProServiceWorldStore } from '../store/proserviceworldStore';\n\ntype Tab = 'packages' | 'deliverables' | 'requirements' | 'faq';\n\nexport function ServiceDetailsPage() {\n const { services, providers } = useProServiceWorldStore();\n const [selectedServiceId, setSelectedServiceId] = useState(services[0]?.id ?? '');\n const [activeTab, setActiveTab] = useState<Tab>('packages');\n const [expandedFaq, setExpandedFaq] = useState<string | null>(null);\n const [showBookingModal, setShowBookingModal] = useState(false);\n const [selectedPackageId, setSelectedPackageId] = useState<string | null>(null);\n\n const service = services.find((s) => s.id === selectedServiceId) ?? services[0];\n const provider = service ? providers.find((p) => p.id === service.providerId) : null;\n\n if (!service) {\n return (\n <div className=\"flex items-center justify-center p-12\">\n <p className=\"text-muted-foreground\">No services available.</p>\n </div>\n );\n }\n\n const tabs: { key: Tab; label: string; icon: typeof Package }[] = [\n { key: 'packages', label: 'Packages', icon: Package },\n { key: 'deliverables', label: 'Deliverables', icon: FileText },\n { key: 'requirements', label: 'Requirements', icon: ClipboardList },\n { key: 'faq', label: 'FAQ', icon: BookOpen },\n ];\n\n const pricingLabel =\n service.pricing.type === 'hourly'\n ? `$${service.pricing.hourlyRate}/hr`\n : service.pricing.type === 'fixed'\n ? `$${service.pricing.basePrice.toLocaleString()} fixed`\n : `From $${service.pricing.basePrice.toLocaleString()}`;\n\n return (\n <div className=\"space-y-6 p-6\">\n {/* Breadcrumb + Service selector */}\n <div className=\"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\">\n <div className=\"flex items-center gap-3\">\n <Button\n variant=\"outline\"\n size=\"sm\"\n onClick={() => setSelectedServiceId(services[0]?.id ?? '')}\n >\n <ArrowLeft className=\"mr-2 h-4 w-4\" /> Services\n </Button>\n <span className=\"text-muted-foreground\">/</span>\n <select\n className=\"rounded border bg-background px-2 py-1 text-sm\"\n value={selectedServiceId}\n onChange={(e) => setSelectedServiceId(e.target.value)}\n >\n {services.map((s) => (\n <option key={s.id} value={s.id}>\n {s.title}\n </option>\n ))}\n </select>\n </div>\n <Button size=\"sm\" onClick={() => setShowBookingModal(true)}>\n <Calendar className=\"mr-2 h-4 w-4\" /> Book This Service\n </Button>\n </div>\n\n <div className=\"grid gap-6 lg:grid-cols-3\">\n {/* Main content — 2 columns */}\n <div className=\"space-y-6 lg:col-span-2\">\n {/* Service header */}\n <Card>\n <CardContent className=\"pt-6\">\n <div className=\"flex flex-wrap items-start justify-between gap-4\">\n <div className=\"space-y-2\">\n <div className=\"flex items-center gap-2\">\n {service.featured && <Badge>Featured</Badge>}\n <Badge variant=\"secondary\">{service.category.replace(/_/g, ' ')}</Badge>\n <Badge variant=\"outline\">{service.subcategory}</Badge>\n </div>\n <h1 className=\"text-2xl font-bold\">{service.title}</h1>\n <p className=\"max-w-2xl text-muted-foreground\">{service.description}</p>\n </div>\n <div className=\"text-right\">\n <p className=\"text-2xl font-bold text-primary\">{pricingLabel}</p>\n <p className=\"text-xs text-muted-foreground\">{service.pricing.type} pricing</p>\n </div>\n </div>\n\n {/* Stats row */}\n <div className=\"mt-6 flex flex-wrap gap-6 border-t pt-4\">\n <div className=\"flex items-center gap-2\">\n <Star className=\"h-4 w-4 text-yellow-500\" />\n <span className=\"text-sm font-medium\">{service.rating}</span>\n <span className=\"text-xs text-muted-foreground\">\n ({service.providerReviews} reviews)\n </span>\n </div>\n <div className=\"flex items-center gap-2\">\n <Clock className=\"h-4 w-4 text-muted-foreground\" />\n <span className=\"text-sm\">{service.duration.typical} days typical</span>\n </div>\n <div className=\"flex items-center gap-2\">\n <CheckCircle2 className=\"h-4 w-4 text-green-500\" />\n <span className=\"text-sm\">{service.totalBookings} bookings</span>\n </div>\n <div className=\"flex items-center gap-2\">\n <Calendar className=\"h-4 w-4 text-muted-foreground\" />\n <span className=\"text-sm\">\n {service.duration.min}-{service.duration.max} days range\n </span>\n </div>\n </div>\n\n {/* Tags */}\n {service.tags.length > 0 && (\n <div className=\"mt-4 flex flex-wrap gap-2\">\n <Tag className=\"h-4 w-4 text-muted-foreground\" />\n {service.tags.map((tag) => (\n <Badge key={tag} variant=\"outline\" className=\"text-xs\">\n {tag}\n </Badge>\n ))}\n </div>\n )}\n </CardContent>\n </Card>\n\n {/* Tabs */}\n <div className=\"flex gap-1 border-b\">\n {tabs.map(({ key, label, icon: Icon }) => (\n <button\n key={key}\n onClick={() => setActiveTab(key)}\n className={`flex items-center gap-2 border-b-2 px-4 py-2 text-sm font-medium transition-colors ${\n activeTab === key\n ? 'border-primary text-primary'\n : 'border-transparent text-muted-foreground hover:text-foreground'\n }`}\n >\n <Icon className=\"h-4 w-4\" />\n {label}\n </button>\n ))}\n </div>\n\n {/* Tab content */}\n {activeTab === 'packages' && (\n <div className=\"grid gap-4 md:grid-cols-2 lg:grid-cols-3\">\n {service.packages.map((pkg) => (\n <Card\n key={pkg.id}\n className={`relative ${pkg.popular ? 'border-primary ring-1 ring-primary' : ''} ${\n selectedPackageId === pkg.id ? 'bg-primary/5' : ''\n }`}\n >\n {pkg.popular && (\n <div className=\"absolute -top-3 left-1/2 -translate-x-1/2\">\n <Badge className=\"bg-primary text-primary-foreground\">Most Popular</Badge>\n </div>\n )}\n <CardHeader className=\"pb-3\">\n <CardTitle className=\"text-lg\">{pkg.name}</CardTitle>\n <p className=\"text-sm text-muted-foreground\">{pkg.description}</p>\n </CardHeader>\n <CardContent className=\"space-y-4\">\n <div>\n <span className=\"text-3xl font-bold\">${pkg.price.toLocaleString()}</span>\n <span className=\"text-sm text-muted-foreground\"> / {pkg.duration} days</span>\n </div>\n <ul className=\"space-y-2\">\n {pkg.features.map((feature, i) => (\n <li key={i} className=\"flex items-start gap-2 text-sm\">\n <CheckCircle2 className=\"mt-0.5 h-4 w-4 shrink-0 text-green-500\" />\n {feature}\n </li>\n ))}\n </ul>\n <Button\n className=\"w-full\"\n variant={pkg.popular ? 'default' : 'outline'}\n onClick={() => {\n setSelectedPackageId(pkg.id);\n setShowBookingModal(true);\n }}\n >\n Select Package\n </Button>\n </CardContent>\n </Card>\n ))}\n </div>\n )}\n\n {activeTab === 'deliverables' && (\n <Card>\n <CardHeader>\n <CardTitle className=\"text-base\">What You'll Receive</CardTitle>\n </CardHeader>\n <CardContent>\n <ul className=\"grid gap-3 sm:grid-cols-2\">\n {service.deliverables.map((item, i) => (\n <li key={i} className=\"flex items-center gap-3 rounded-lg border p-3\">\n <FileText className=\"h-5 w-5 text-primary\" />\n <span className=\"text-sm font-medium\">{item}</span>\n </li>\n ))}\n </ul>\n </CardContent>\n </Card>\n )}\n\n {activeTab === 'requirements' && (\n <Card>\n <CardHeader>\n <CardTitle className=\"text-base\">What We Need From You</CardTitle>\n </CardHeader>\n <CardContent>\n <ul className=\"space-y-3\">\n {service.requirements.map((item, i) => (\n <li key={i} className=\"flex items-start gap-3 rounded-lg border p-3\">\n <ClipboardList className=\"mt-0.5 h-5 w-5 text-orange-500\" />\n <span className=\"text-sm\">{item}</span>\n </li>\n ))}\n </ul>\n </CardContent>\n </Card>\n )}\n\n {activeTab === 'faq' && (\n <div className=\"space-y-3\">\n {service.faq.length === 0 ? (\n <Card>\n <CardContent className=\"py-8 text-center text-muted-foreground\">\n No FAQ items for this service yet.\n </CardContent>\n </Card>\n ) : (\n service.faq.map((item) => (\n <Card key={item.id}>\n <button\n className=\"flex w-full items-center justify-between p-4 text-left\"\n onClick={() => setExpandedFaq(expandedFaq === item.id ? null : item.id)}\n >\n <span className=\"font-medium\">{item.question}</span>\n {expandedFaq === item.id ? (\n <ChevronUp className=\"h-4 w-4 text-muted-foreground\" />\n ) : (\n <ChevronDown className=\"h-4 w-4 text-muted-foreground\" />\n )}\n </button>\n {expandedFaq === item.id && (\n <CardContent className=\"border-t pt-4\">\n <p className=\"text-sm text-muted-foreground\">{item.answer}</p>\n </CardContent>\n )}\n </Card>\n ))\n )}\n </div>\n )}\n </div>\n\n {/* Provider sidebar */}\n <div className=\"space-y-4\">\n {provider && (\n <Card>\n <CardHeader>\n <CardTitle className=\"text-base\">Service Provider</CardTitle>\n </CardHeader>\n <CardContent className=\"space-y-4\">\n <div className=\"flex items-center gap-3\">\n <div className=\"flex h-12 w-12 items-center justify-center rounded-full bg-primary/10 text-primary font-semibold\">\n {provider.name.charAt(0)}\n </div>\n <div>\n <p className=\"font-medium\">{provider.name}</p>\n <p className=\"text-sm text-muted-foreground\">{provider.businessName}</p>\n </div>\n </div>\n\n {provider.verified && (\n <div className=\"flex items-center gap-2 rounded-lg bg-green-50 p-2 dark:bg-green-950\">\n <Shield className=\"h-4 w-4 text-green-600\" />\n <span className=\"text-sm font-medium text-green-700 dark:text-green-400\">\n Verified Provider\n </span>\n </div>\n )}\n\n <div className=\"space-y-3 text-sm\">\n <div className=\"flex items-center justify-between\">\n <span className=\"text-muted-foreground\">Rating</span>\n <div className=\"flex items-center gap-1\">\n <Star className=\"h-4 w-4 text-yellow-500\" />\n <span className=\"font-medium\">{provider.rating}</span>\n <span className=\"text-muted-foreground\">({provider.totalReviews})</span>\n </div>\n </div>\n <div className=\"flex items-center justify-between\">\n <span className=\"text-muted-foreground\">Completion Rate</span>\n <span className=\"font-medium\">{provider.completionRate}%</span>\n </div>\n <div className=\"flex items-center justify-between\">\n <span className=\"text-muted-foreground\">Response Time</span>\n <span className=\"font-medium\">{provider.responseTime}h avg</span>\n </div>\n <div className=\"flex items-center justify-between\">\n <span className=\"text-muted-foreground\">Experience</span>\n <span className=\"font-medium\">{provider.yearsExperience} years</span>\n </div>\n <div className=\"flex items-center justify-between\">\n <span className=\"text-muted-foreground\">Projects Done</span>\n <span className=\"font-medium\">{provider.projectsCompleted}</span>\n </div>\n <div className=\"flex items-center justify-between\">\n <span className=\"text-muted-foreground\">Hourly Rate</span>\n <span className=\"font-medium\">${provider.hourlyRate}/hr</span>\n </div>\n <div className=\"flex items-center justify-between\">\n <span className=\"text-muted-foreground\">Location</span>\n <span className=\"font-medium\">{provider.location}</span>\n </div>\n </div>\n\n <div className=\"space-y-2 border-t pt-3\">\n <p className=\"text-xs font-medium text-muted-foreground\">Certifications</p>\n <div className=\"flex flex-wrap gap-1\">\n {provider.certifications.map((cert) => (\n <Badge key={cert} variant=\"secondary\" className=\"text-xs\">\n {cert}\n </Badge>\n ))}\n </div>\n </div>\n\n <div className=\"space-y-2 border-t pt-3\">\n <p className=\"text-xs font-medium text-muted-foreground\">Languages</p>\n <div className=\"flex flex-wrap gap-1\">\n {provider.languages.map((lang) => (\n <Badge key={lang} variant=\"outline\" className=\"text-xs\">\n {lang}\n </Badge>\n ))}\n </div>\n </div>\n\n <div className=\"flex gap-2 border-t pt-3\">\n <Button className=\"flex-1\" size=\"sm\" variant=\"outline\">\n <User className=\"mr-2 h-4 w-4\" /> View Profile\n </Button>\n <Button className=\"flex-1\" size=\"sm\" variant=\"outline\">\n <MessageSquare className=\"mr-2 h-4 w-4\" /> Message\n </Button>\n </div>\n </CardContent>\n </Card>\n )}\n\n {/* Quick booking card */}\n <Card>\n <CardHeader>\n <CardTitle className=\"text-base\">Quick Book</CardTitle>\n </CardHeader>\n <CardContent className=\"space-y-3\">\n <div className=\"flex items-center justify-between text-sm\">\n <span className=\"text-muted-foreground\">Starting from</span>\n <span className=\"text-lg font-bold text-primary\">\n ${service.pricing.basePrice.toLocaleString()}\n </span>\n </div>\n <div className=\"flex items-center gap-2 text-sm text-muted-foreground\">\n <Clock className=\"h-4 w-4\" />\n <span>Typical duration: {service.duration.typical} days</span>\n </div>\n <div className=\"flex items-center gap-2 text-sm text-muted-foreground\">\n <DollarSign className=\"h-4 w-4\" />\n <span>{service.pricing.type} pricing model</span>\n </div>\n <Button className=\"w-full\" onClick={() => setShowBookingModal(true)}>\n <Calendar className=\"mr-2 h-4 w-4\" /> Book Now\n </Button>\n </CardContent>\n </Card>\n </div>\n </div>\n\n {/* Booking Modal */}\n {showBookingModal && (\n <div className=\"fixed inset-0 z-50 flex items-center justify-center bg-black/50\">\n <Card className=\"w-full max-w-lg mx-4\">\n <CardHeader>\n <div className=\"flex items-center justify-between\">\n <CardTitle>Book Service</CardTitle>\n <Button variant=\"outline\" size=\"sm\" onClick={() => setShowBookingModal(false)}>\n Close\n </Button>\n </div>\n </CardHeader>\n <CardContent className=\"space-y-4\">\n <div>\n <p className=\"font-medium\">{service.title}</p>\n <p className=\"text-sm text-muted-foreground\">by {service.providerName}</p>\n </div>\n\n <div className=\"space-y-2\">\n <p className=\"text-sm font-medium\">Select Package</p>\n {service.packages.map((pkg) => (\n <button\n key={pkg.id}\n onClick={() => setSelectedPackageId(pkg.id)}\n className={`w-full rounded-lg border p-3 text-left transition-colors ${\n selectedPackageId === pkg.id\n ? 'border-primary bg-primary/5'\n : 'hover:bg-muted/50'\n }`}\n >\n <div className=\"flex items-center justify-between\">\n <span className=\"font-medium\">{pkg.name}</span>\n <span className=\"font-bold\">${pkg.price.toLocaleString()}</span>\n </div>\n <p className=\"text-xs text-muted-foreground\">\n {pkg.description} - {pkg.duration} days\n </p>\n </button>\n ))}\n </div>\n\n <div className=\"flex gap-2\">\n <Button\n variant=\"outline\"\n className=\"flex-1\"\n onClick={() => setShowBookingModal(false)}\n >\n Cancel\n </Button>\n <Button className=\"flex-1\" disabled={!selectedPackageId}>\n Confirm Booking\n </Button>\n </div>\n </CardContent>\n </Card>\n </div>\n )}\n </div>\n );\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ServiceDetailsPage.js","names":[],"sources":["../../../src/proserviceworld/pages/ServiceDetailsPage.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { Badge, Button, Card, CardContent, CardHeader, CardTitle } from '@burdenoff/fe-libs/ui';\nimport {\n ArrowLeft,\n Star,\n Clock,\n CheckCircle2,\n ChevronDown,\n ChevronUp,\n Package,\n FileText,\n ClipboardList,\n Tag,\n Shield,\n Calendar,\n DollarSign,\n User,\n MessageSquare,\n BookOpen,\n} from 'lucide-react';\nimport { useProServiceWorldStore } from '../store/proserviceworldStore';\n\ntype Tab = 'packages' | 'deliverables' | 'requirements' | 'faq';\n\nexport function ServiceDetailsPage() {\n const { services, providers } = useProServiceWorldStore();\n const [selectedServiceId, setSelectedServiceId] = useState(services[0]?.id ?? '');\n const [activeTab, setActiveTab] = useState<Tab>('packages');\n const [expandedFaq, setExpandedFaq] = useState<string | null>(null);\n const [showBookingModal, setShowBookingModal] = useState(false);\n const [selectedPackageId, setSelectedPackageId] = useState<string | null>(null);\n\n const service = services.find((s) => s.id === selectedServiceId) ?? services[0];\n const provider = service ? providers.find((p) => p.id === service.providerId) : null;\n\n if (!service) {\n return (\n <div className=\"flex items-center justify-center p-12\">\n <p className=\"text-text-secondary\">No services available.</p>\n </div>\n );\n }\n\n const tabs: { key: Tab; label: string; icon: typeof Package }[] = [\n { key: 'packages', label: 'Packages', icon: Package },\n { key: 'deliverables', label: 'Deliverables', icon: FileText },\n { key: 'requirements', label: 'Requirements', icon: ClipboardList },\n { key: 'faq', label: 'FAQ', icon: BookOpen },\n ];\n\n const pricingLabel =\n service.pricing.type === 'hourly'\n ? `$${service.pricing.hourlyRate}/hr`\n : service.pricing.type === 'fixed'\n ? `$${service.pricing.basePrice.toLocaleString()} fixed`\n : `From $${service.pricing.basePrice.toLocaleString()}`;\n\n return (\n <div className=\"space-y-6 p-6\">\n {/* Breadcrumb + Service selector */}\n <div className=\"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\">\n <div className=\"flex items-center gap-3\">\n <Button\n variant=\"outline\"\n size=\"sm\"\n onClick={() => setSelectedServiceId(services[0]?.id ?? '')}\n >\n <ArrowLeft className=\"mr-2 h-4 w-4\" /> Services\n </Button>\n <span className=\"text-text-secondary\">/</span>\n <select\n className=\"rounded border bg-bg-surface px-2 py-1 text-sm\"\n value={selectedServiceId}\n onChange={(e) => setSelectedServiceId(e.target.value)}\n >\n {services.map((s) => (\n <option key={s.id} value={s.id}>\n {s.title}\n </option>\n ))}\n </select>\n </div>\n <Button size=\"sm\" onClick={() => setShowBookingModal(true)}>\n <Calendar className=\"mr-2 h-4 w-4\" /> Book This Service\n </Button>\n </div>\n\n <div className=\"grid gap-6 lg:grid-cols-3\">\n {/* Main content — 2 columns */}\n <div className=\"space-y-6 lg:col-span-2\">\n {/* Service header */}\n <Card>\n <CardContent className=\"pt-6\">\n <div className=\"flex flex-wrap items-start justify-between gap-4\">\n <div className=\"space-y-2\">\n <div className=\"flex items-center gap-2\">\n {service.featured && <Badge>Featured</Badge>}\n <Badge variant=\"secondary\">{service.category.replace(/_/g, ' ')}</Badge>\n <Badge variant=\"outline\">{service.subcategory}</Badge>\n </div>\n <h1 className=\"text-2xl font-bold\">{service.title}</h1>\n <p className=\"max-w-2xl text-text-secondary\">{service.description}</p>\n </div>\n <div className=\"text-right\">\n <p className=\"text-2xl font-bold text-primary\">{pricingLabel}</p>\n <p className=\"text-xs text-text-secondary\">{service.pricing.type} pricing</p>\n </div>\n </div>\n\n {/* Stats row */}\n <div className=\"mt-6 flex flex-wrap gap-6 border-t pt-4\">\n <div className=\"flex items-center gap-2\">\n <Star className=\"h-4 w-4 text-yellow-500\" />\n <span className=\"text-sm font-medium\">{service.rating}</span>\n <span className=\"text-xs text-text-secondary\">\n ({service.providerReviews} reviews)\n </span>\n </div>\n <div className=\"flex items-center gap-2\">\n <Clock className=\"h-4 w-4 text-text-secondary\" />\n <span className=\"text-sm\">{service.duration.typical} days typical</span>\n </div>\n <div className=\"flex items-center gap-2\">\n <CheckCircle2 className=\"h-4 w-4 text-green-500\" />\n <span className=\"text-sm\">{service.totalBookings} bookings</span>\n </div>\n <div className=\"flex items-center gap-2\">\n <Calendar className=\"h-4 w-4 text-text-secondary\" />\n <span className=\"text-sm\">\n {service.duration.min}-{service.duration.max} days range\n </span>\n </div>\n </div>\n\n {/* Tags */}\n {service.tags.length > 0 && (\n <div className=\"mt-4 flex flex-wrap gap-2\">\n <Tag className=\"h-4 w-4 text-text-secondary\" />\n {service.tags.map((tag) => (\n <Badge key={tag} variant=\"outline\" className=\"text-xs\">\n {tag}\n </Badge>\n ))}\n </div>\n )}\n </CardContent>\n </Card>\n\n {/* Tabs */}\n <div className=\"flex gap-1 border-b\">\n {tabs.map(({ key, label, icon: Icon }) => (\n <button\n key={key}\n onClick={() => setActiveTab(key)}\n className={`flex items-center gap-2 border-b-2 px-4 py-2 text-sm font-medium transition-colors ${\n activeTab === key\n ? 'border-primary text-primary'\n : 'border-transparent text-text-secondary hover:text-text-primary'\n }`}\n >\n <Icon className=\"h-4 w-4\" />\n {label}\n </button>\n ))}\n </div>\n\n {/* Tab content */}\n {activeTab === 'packages' && (\n <div className=\"grid gap-4 md:grid-cols-2 lg:grid-cols-3\">\n {service.packages.map((pkg) => (\n <Card\n key={pkg.id}\n className={`relative ${pkg.popular ? 'border-primary ring-1 ring-primary' : ''} ${\n selectedPackageId === pkg.id ? 'bg-action-primary-bg/5' : ''\n }`}\n >\n {pkg.popular && (\n <div className=\"absolute -top-3 left-1/2 -translate-x-1/2\">\n <Badge className=\"bg-action-primary-bg text-action-primary-text\">Most Popular</Badge>\n </div>\n )}\n <CardHeader className=\"pb-3\">\n <CardTitle className=\"text-lg\">{pkg.name}</CardTitle>\n <p className=\"text-sm text-text-secondary\">{pkg.description}</p>\n </CardHeader>\n <CardContent className=\"space-y-4\">\n <div>\n <span className=\"text-3xl font-bold\">${pkg.price.toLocaleString()}</span>\n <span className=\"text-sm text-text-secondary\"> / {pkg.duration} days</span>\n </div>\n <ul className=\"space-y-2\">\n {pkg.features.map((feature, i) => (\n <li key={i} className=\"flex items-start gap-2 text-sm\">\n <CheckCircle2 className=\"mt-0.5 h-4 w-4 shrink-0 text-green-500\" />\n {feature}\n </li>\n ))}\n </ul>\n <Button\n className=\"w-full\"\n variant={pkg.popular ? 'default' : 'outline'}\n onClick={() => {\n setSelectedPackageId(pkg.id);\n setShowBookingModal(true);\n }}\n >\n Select Package\n </Button>\n </CardContent>\n </Card>\n ))}\n </div>\n )}\n\n {activeTab === 'deliverables' && (\n <Card>\n <CardHeader>\n <CardTitle className=\"text-base\">What You'll Receive</CardTitle>\n </CardHeader>\n <CardContent>\n <ul className=\"grid gap-3 sm:grid-cols-2\">\n {service.deliverables.map((item, i) => (\n <li key={i} className=\"flex items-center gap-3 rounded-lg border p-3\">\n <FileText className=\"h-5 w-5 text-primary\" />\n <span className=\"text-sm font-medium\">{item}</span>\n </li>\n ))}\n </ul>\n </CardContent>\n </Card>\n )}\n\n {activeTab === 'requirements' && (\n <Card>\n <CardHeader>\n <CardTitle className=\"text-base\">What We Need From You</CardTitle>\n </CardHeader>\n <CardContent>\n <ul className=\"space-y-3\">\n {service.requirements.map((item, i) => (\n <li key={i} className=\"flex items-start gap-3 rounded-lg border p-3\">\n <ClipboardList className=\"mt-0.5 h-5 w-5 text-orange-500\" />\n <span className=\"text-sm\">{item}</span>\n </li>\n ))}\n </ul>\n </CardContent>\n </Card>\n )}\n\n {activeTab === 'faq' && (\n <div className=\"space-y-3\">\n {service.faq.length === 0 ? (\n <Card>\n <CardContent className=\"py-8 text-center text-text-secondary\">\n No FAQ items for this service yet.\n </CardContent>\n </Card>\n ) : (\n service.faq.map((item) => (\n <Card key={item.id}>\n <button\n className=\"flex w-full items-center justify-between p-4 text-left\"\n onClick={() => setExpandedFaq(expandedFaq === item.id ? null : item.id)}\n >\n <span className=\"font-medium\">{item.question}</span>\n {expandedFaq === item.id ? (\n <ChevronUp className=\"h-4 w-4 text-text-secondary\" />\n ) : (\n <ChevronDown className=\"h-4 w-4 text-text-secondary\" />\n )}\n </button>\n {expandedFaq === item.id && (\n <CardContent className=\"border-t pt-4\">\n <p className=\"text-sm text-text-secondary\">{item.answer}</p>\n </CardContent>\n )}\n </Card>\n ))\n )}\n </div>\n )}\n </div>\n\n {/* Provider sidebar */}\n <div className=\"space-y-4\">\n {provider && (\n <Card>\n <CardHeader>\n <CardTitle className=\"text-base\">Service Provider</CardTitle>\n </CardHeader>\n <CardContent className=\"space-y-4\">\n <div className=\"flex items-center gap-3\">\n <div className=\"flex h-12 w-12 items-center justify-center rounded-full bg-action-primary-bg/10 text-primary font-semibold\">\n {provider.name.charAt(0)}\n </div>\n <div>\n <p className=\"font-medium\">{provider.name}</p>\n <p className=\"text-sm text-text-secondary\">{provider.businessName}</p>\n </div>\n </div>\n\n {provider.verified && (\n <div className=\"flex items-center gap-2 rounded-lg bg-green-50 p-2 dark:bg-green-950\">\n <Shield className=\"h-4 w-4 text-green-600\" />\n <span className=\"text-sm font-medium text-green-700 dark:text-green-400\">\n Verified Provider\n </span>\n </div>\n )}\n\n <div className=\"space-y-3 text-sm\">\n <div className=\"flex items-center justify-between\">\n <span className=\"text-text-secondary\">Rating</span>\n <div className=\"flex items-center gap-1\">\n <Star className=\"h-4 w-4 text-yellow-500\" />\n <span className=\"font-medium\">{provider.rating}</span>\n <span className=\"text-text-secondary\">({provider.totalReviews})</span>\n </div>\n </div>\n <div className=\"flex items-center justify-between\">\n <span className=\"text-text-secondary\">Completion Rate</span>\n <span className=\"font-medium\">{provider.completionRate}%</span>\n </div>\n <div className=\"flex items-center justify-between\">\n <span className=\"text-text-secondary\">Response Time</span>\n <span className=\"font-medium\">{provider.responseTime}h avg</span>\n </div>\n <div className=\"flex items-center justify-between\">\n <span className=\"text-text-secondary\">Experience</span>\n <span className=\"font-medium\">{provider.yearsExperience} years</span>\n </div>\n <div className=\"flex items-center justify-between\">\n <span className=\"text-text-secondary\">Projects Done</span>\n <span className=\"font-medium\">{provider.projectsCompleted}</span>\n </div>\n <div className=\"flex items-center justify-between\">\n <span className=\"text-text-secondary\">Hourly Rate</span>\n <span className=\"font-medium\">${provider.hourlyRate}/hr</span>\n </div>\n <div className=\"flex items-center justify-between\">\n <span className=\"text-text-secondary\">Location</span>\n <span className=\"font-medium\">{provider.location}</span>\n </div>\n </div>\n\n <div className=\"space-y-2 border-t pt-3\">\n <p className=\"text-xs font-medium text-text-secondary\">Certifications</p>\n <div className=\"flex flex-wrap gap-1\">\n {provider.certifications.map((cert) => (\n <Badge key={cert} variant=\"secondary\" className=\"text-xs\">\n {cert}\n </Badge>\n ))}\n </div>\n </div>\n\n <div className=\"space-y-2 border-t pt-3\">\n <p className=\"text-xs font-medium text-text-secondary\">Languages</p>\n <div className=\"flex flex-wrap gap-1\">\n {provider.languages.map((lang) => (\n <Badge key={lang} variant=\"outline\" className=\"text-xs\">\n {lang}\n </Badge>\n ))}\n </div>\n </div>\n\n <div className=\"flex gap-2 border-t pt-3\">\n <Button className=\"flex-1\" size=\"sm\" variant=\"outline\">\n <User className=\"mr-2 h-4 w-4\" /> View Profile\n </Button>\n <Button className=\"flex-1\" size=\"sm\" variant=\"outline\">\n <MessageSquare className=\"mr-2 h-4 w-4\" /> Message\n </Button>\n </div>\n </CardContent>\n </Card>\n )}\n\n {/* Quick booking card */}\n <Card>\n <CardHeader>\n <CardTitle className=\"text-base\">Quick Book</CardTitle>\n </CardHeader>\n <CardContent className=\"space-y-3\">\n <div className=\"flex items-center justify-between text-sm\">\n <span className=\"text-text-secondary\">Starting from</span>\n <span className=\"text-lg font-bold text-primary\">\n ${service.pricing.basePrice.toLocaleString()}\n </span>\n </div>\n <div className=\"flex items-center gap-2 text-sm text-text-secondary\">\n <Clock className=\"h-4 w-4\" />\n <span>Typical duration: {service.duration.typical} days</span>\n </div>\n <div className=\"flex items-center gap-2 text-sm text-text-secondary\">\n <DollarSign className=\"h-4 w-4\" />\n <span>{service.pricing.type} pricing model</span>\n </div>\n <Button className=\"w-full\" onClick={() => setShowBookingModal(true)}>\n <Calendar className=\"mr-2 h-4 w-4\" /> Book Now\n </Button>\n </CardContent>\n </Card>\n </div>\n </div>\n\n {/* Booking Modal */}\n {showBookingModal && (\n <div className=\"fixed inset-0 z-50 flex items-center justify-center bg-black/50\">\n <Card className=\"w-full max-w-lg mx-4\">\n <CardHeader>\n <div className=\"flex items-center justify-between\">\n <CardTitle>Book Service</CardTitle>\n <Button variant=\"outline\" size=\"sm\" onClick={() => setShowBookingModal(false)}>\n Close\n </Button>\n </div>\n </CardHeader>\n <CardContent className=\"space-y-4\">\n <div>\n <p className=\"font-medium\">{service.title}</p>\n <p className=\"text-sm text-text-secondary\">by {service.providerName}</p>\n </div>\n\n <div className=\"space-y-2\">\n <p className=\"text-sm font-medium\">Select Package</p>\n {service.packages.map((pkg) => (\n <button\n key={pkg.id}\n onClick={() => setSelectedPackageId(pkg.id)}\n className={`w-full rounded-lg border p-3 text-left transition-colors ${\n selectedPackageId === pkg.id\n ? 'border-primary bg-action-primary-bg/5'\n : 'hover:bg-bg-sunken/50'\n }`}\n >\n <div className=\"flex items-center justify-between\">\n <span className=\"font-medium\">{pkg.name}</span>\n <span className=\"font-bold\">${pkg.price.toLocaleString()}</span>\n </div>\n <p className=\"text-xs text-text-secondary\">\n {pkg.description} - {pkg.duration} days\n </p>\n </button>\n ))}\n </div>\n\n <div className=\"flex gap-2\">\n <Button\n variant=\"outline\"\n className=\"flex-1\"\n onClick={() => setShowBookingModal(false)}\n >\n Cancel\n </Button>\n <Button className=\"flex-1\" disabled={!selectedPackageId}>\n Confirm Booking\n </Button>\n </div>\n </CardContent>\n </Card>\n </div>\n )}\n </div>\n );\n}\n"],"mappings":";;;;;;AAwBA,SAAgB,IAAqB;CACnC,IAAM,EAAE,aAAU,iBAAc,GAAyB,EACnD,CAAC,GAAmB,KAAwB,EAAS,EAAS,IAAI,MAAM,GAAG,EAC3E,CAAC,GAAW,KAAgB,EAAc,WAAW,EACrD,CAAC,GAAa,KAAkB,EAAwB,KAAK,EAC7D,CAAC,GAAkB,KAAuB,EAAS,GAAM,EACzD,CAAC,GAAmB,KAAwB,EAAwB,KAAK,EAEzE,IAAU,EAAS,MAAM,MAAM,EAAE,OAAO,EAAkB,IAAI,EAAS,IACvE,IAAW,IAAU,EAAU,MAAM,MAAM,EAAE,OAAO,EAAQ,WAAW,GAAG;AAEhF,KAAI,CAAC,EACH,QACE,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,KAAD;GAAG,WAAU;aAAsB;GAA0B,CAAA;EACzD,CAAA;CAIV,IAAM,IAA4D;EAChE;GAAE,KAAK;GAAY,OAAO;GAAY,MAAM;GAAS;EACrD;GAAE,KAAK;GAAgB,OAAO;GAAgB,MAAM;GAAU;EAC9D;GAAE,KAAK;GAAgB,OAAO;GAAgB,MAAM;GAAe;EACnE;GAAE,KAAK;GAAO,OAAO;GAAO,MAAM;GAAU;EAC7C,EAEK,IACJ,EAAQ,QAAQ,SAAS,WACrB,IAAI,EAAQ,QAAQ,WAAW,OAC/B,EAAQ,QAAQ,SAAS,UACvB,IAAI,EAAQ,QAAQ,UAAU,gBAAgB,CAAC,UAC/C,SAAS,EAAQ,QAAQ,UAAU,gBAAgB;AAE3D,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GAEE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD;KAAK,WAAU;eAAf;MACE,kBAAC,GAAD;OACE,SAAQ;OACR,MAAK;OACL,eAAe,EAAqB,EAAS,IAAI,MAAM,GAAG;iBAH5D,CAKE,kBAAC,GAAD,EAAW,WAAU,gBAAiB,CAAA,EAAA,YAC/B;;MACT,kBAAC,QAAD;OAAM,WAAU;iBAAsB;OAAQ,CAAA;MAC9C,kBAAC,UAAD;OACE,WAAU;OACV,OAAO;OACP,WAAW,MAAM,EAAqB,EAAE,OAAO,MAAM;iBAEpD,EAAS,KAAK,MACb,kBAAC,UAAD;QAAmB,OAAO,EAAE;kBACzB,EAAE;QACI,EAFI,EAAE,GAEN,CACT;OACK,CAAA;MACL;QACN,kBAAC,GAAD;KAAQ,MAAK;KAAK,eAAe,EAAoB,GAAK;eAA1D,CACE,kBAAC,GAAD,EAAU,WAAU,gBAAiB,CAAA,EAAA,qBAC9B;OACL;;GAEN,kBAAC,OAAD;IAAK,WAAU;cAAf,CAEE,kBAAC,OAAD;KAAK,WAAU;eAAf;MAEE,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;OAAa,WAAU;iBAAvB;QACE,kBAAC,OAAD;SAAK,WAAU;mBAAf,CACE,kBAAC,OAAD;UAAK,WAAU;oBAAf;WACE,kBAAC,OAAD;YAAK,WAAU;sBAAf;aACG,EAAQ,YAAY,kBAAC,GAAD,EAAA,UAAO,YAAgB,CAAA;aAC5C,kBAAC,GAAD;cAAO,SAAQ;wBAAa,EAAQ,SAAS,QAAQ,MAAM,IAAI;cAAS,CAAA;aACxE,kBAAC,GAAD;cAAO,SAAQ;wBAAW,EAAQ;cAAoB,CAAA;aAClD;;WACN,kBAAC,MAAD;YAAI,WAAU;sBAAsB,EAAQ;YAAW,CAAA;WACvD,kBAAC,KAAD;YAAG,WAAU;sBAAiC,EAAQ;YAAgB,CAAA;WAClE;aACN,kBAAC,OAAD;UAAK,WAAU;oBAAf,CACE,kBAAC,KAAD;WAAG,WAAU;qBAAmC;WAAiB,CAAA,EACjE,kBAAC,KAAD;WAAG,WAAU;qBAAb,CAA4C,EAAQ,QAAQ,MAAK,WAAY;aACzE;YACF;;QAGN,kBAAC,OAAD;SAAK,WAAU;mBAAf;UACE,kBAAC,OAAD;WAAK,WAAU;qBAAf;YACE,kBAAC,GAAD,EAAM,WAAU,2BAA4B,CAAA;YAC5C,kBAAC,QAAD;aAAM,WAAU;uBAAuB,EAAQ;aAAc,CAAA;YAC7D,kBAAC,QAAD;aAAM,WAAU;uBAAhB;cAA8C;cAC1C,EAAQ;cAAgB;cACrB;;YACH;;UACN,kBAAC,OAAD;WAAK,WAAU;qBAAf,CACE,kBAAC,GAAD,EAAO,WAAU,+BAAgC,CAAA,EACjD,kBAAC,QAAD;YAAM,WAAU;sBAAhB,CAA2B,EAAQ,SAAS,SAAQ,gBAAoB;cACpE;;UACN,kBAAC,OAAD;WAAK,WAAU;qBAAf,CACE,kBAAC,GAAD,EAAc,WAAU,0BAA2B,CAAA,EACnD,kBAAC,QAAD;YAAM,WAAU;sBAAhB,CAA2B,EAAQ,eAAc,YAAgB;cAC7D;;UACN,kBAAC,OAAD;WAAK,WAAU;qBAAf,CACE,kBAAC,GAAD,EAAU,WAAU,+BAAgC,CAAA,EACpD,kBAAC,QAAD;YAAM,WAAU;sBAAhB;aACG,EAAQ,SAAS;aAAI;aAAE,EAAQ,SAAS;aAAI;aACxC;cACH;;UACF;;QAGL,EAAQ,KAAK,SAAS,KACrB,kBAAC,OAAD;SAAK,WAAU;mBAAf,CACE,kBAAC,GAAD,EAAK,WAAU,+BAAgC,CAAA,EAC9C,EAAQ,KAAK,KAAK,MACjB,kBAAC,GAAD;UAAiB,SAAQ;UAAU,WAAU;oBAC1C;UACK,EAFI,EAEJ,CACR,CACE;;QAEI;UACT,CAAA;MAGP,kBAAC,OAAD;OAAK,WAAU;iBACZ,EAAK,KAAK,EAAE,QAAK,UAAO,MAAM,QAC7B,kBAAC,UAAD;QAEE,eAAe,EAAa,EAAI;QAChC,WAAW,sFACT,MAAc,IACV,gCACA;kBANR,CASE,kBAAC,GAAD,EAAM,WAAU,WAAY,CAAA,EAC3B,EACM;UAVF,EAUE,CACT;OACE,CAAA;MAGL,MAAc,cACb,kBAAC,OAAD;OAAK,WAAU;iBACZ,EAAQ,SAAS,KAAK,MACrB,kBAAC,GAAD;QAEE,WAAW,YAAY,EAAI,UAAU,uCAAuC,GAAG,GAC7E,MAAsB,EAAI,KAAK,2BAA2B;kBAH9D;SAMG,EAAI,WACH,kBAAC,OAAD;UAAK,WAAU;oBACb,kBAAC,GAAD;WAAO,WAAU;qBAAgD;WAAoB,CAAA;UACjF,CAAA;SAER,kBAAC,GAAD;UAAY,WAAU;oBAAtB,CACE,kBAAC,GAAD;WAAW,WAAU;qBAAW,EAAI;WAAiB,CAAA,EACrD,kBAAC,KAAD;WAAG,WAAU;qBAA+B,EAAI;WAAgB,CAAA,CACrD;;SACb,kBAAC,GAAD;UAAa,WAAU;oBAAvB;WACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,QAAD;YAAM,WAAU;sBAAhB,CAAqC,KAAE,EAAI,MAAM,gBAAgB,CAAQ;eACzE,kBAAC,QAAD;YAAM,WAAU;sBAAhB;aAA8C;aAAI,EAAI;aAAS;aAAY;cACvE,EAAA,CAAA;WACN,kBAAC,MAAD;YAAI,WAAU;sBACX,EAAI,SAAS,KAAK,GAAS,MAC1B,kBAAC,MAAD;aAAY,WAAU;uBAAtB,CACE,kBAAC,GAAD,EAAc,WAAU,0CAA2C,CAAA,EAClE,EACE;eAHI,EAGJ,CACL;YACC,CAAA;WACL,kBAAC,GAAD;YACE,WAAU;YACV,SAAS,EAAI,UAAU,YAAY;YACnC,eAAe;AAEb,aADA,EAAqB,EAAI,GAAG,EAC5B,EAAoB,GAAK;;sBAE5B;YAEQ,CAAA;WACG;;SACT;UAtCA,EAAI,GAsCJ,CACP;OACE,CAAA;MAGP,MAAc,kBACb,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;OAAW,WAAU;iBAAY;OAAoC,CAAA,EAC1D,CAAA,EACb,kBAAC,GAAD,EAAA,UACE,kBAAC,MAAD;OAAI,WAAU;iBACX,EAAQ,aAAa,KAAK,GAAM,MAC/B,kBAAC,MAAD;QAAY,WAAU;kBAAtB,CACE,kBAAC,GAAD,EAAU,WAAU,wBAAyB,CAAA,EAC7C,kBAAC,QAAD;SAAM,WAAU;mBAAuB;SAAY,CAAA,CAChD;UAHI,EAGJ,CACL;OACC,CAAA,EACO,CAAA,CACT,EAAA,CAAA;MAGR,MAAc,kBACb,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;OAAW,WAAU;iBAAY;OAAiC,CAAA,EACvD,CAAA,EACb,kBAAC,GAAD,EAAA,UACE,kBAAC,MAAD;OAAI,WAAU;iBACX,EAAQ,aAAa,KAAK,GAAM,MAC/B,kBAAC,MAAD;QAAY,WAAU;kBAAtB,CACE,kBAAC,GAAD,EAAe,WAAU,kCAAmC,CAAA,EAC5D,kBAAC,QAAD;SAAM,WAAU;mBAAW;SAAY,CAAA,CACpC;UAHI,EAGJ,CACL;OACC,CAAA,EACO,CAAA,CACT,EAAA,CAAA;MAGR,MAAc,SACb,kBAAC,OAAD;OAAK,WAAU;iBACZ,EAAQ,IAAI,WAAW,IACtB,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;QAAa,WAAU;kBAAuC;QAEhD,CAAA,EACT,CAAA,GAEP,EAAQ,IAAI,KAAK,MACf,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,UAAD;QACE,WAAU;QACV,eAAe,EAAe,MAAgB,EAAK,KAAK,OAAO,EAAK,GAAG;kBAFzE,CAIE,kBAAC,QAAD;SAAM,WAAU;mBAAe,EAAK;SAAgB,CAAA,EACnD,MAAgB,EAAK,KACpB,kBAAC,GAAD,EAAW,WAAU,+BAAgC,CAAA,GAErD,kBAAC,GAAD,EAAa,WAAU,+BAAgC,CAAA,CAElD;WACR,MAAgB,EAAK,MACpB,kBAAC,GAAD;QAAa,WAAU;kBACrB,kBAAC,KAAD;SAAG,WAAU;mBAA+B,EAAK;SAAW,CAAA;QAChD,CAAA,CAEX,EAAA,EAjBI,EAAK,GAiBT,CACP;OAEA,CAAA;MAEJ;QAGN,kBAAC,OAAD;KAAK,WAAU;eAAf,CACG,KACC,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;MAAW,WAAU;gBAAY;MAA4B,CAAA,EAClD,CAAA,EACb,kBAAC,GAAD;MAAa,WAAU;gBAAvB;OACE,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,OAAD;SAAK,WAAU;mBACZ,EAAS,KAAK,OAAO,EAAE;SACpB,CAAA,EACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;SAAG,WAAU;mBAAe,EAAS;SAAS,CAAA,EAC9C,kBAAC,KAAD;SAAG,WAAU;mBAA+B,EAAS;SAAiB,CAAA,CAClE,EAAA,CAAA,CACF;;OAEL,EAAS,YACR,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,GAAD,EAAQ,WAAU,0BAA2B,CAAA,EAC7C,kBAAC,QAAD;SAAM,WAAU;mBAAyD;SAElE,CAAA,CACH;;OAGR,kBAAC,OAAD;QAAK,WAAU;kBAAf;SACE,kBAAC,OAAD;UAAK,WAAU;oBAAf,CACE,kBAAC,QAAD;WAAM,WAAU;qBAAsB;WAAa,CAAA,EACnD,kBAAC,OAAD;WAAK,WAAU;qBAAf;YACE,kBAAC,GAAD,EAAM,WAAU,2BAA4B,CAAA;YAC5C,kBAAC,QAAD;aAAM,WAAU;uBAAe,EAAS;aAAc,CAAA;YACtD,kBAAC,QAAD;aAAM,WAAU;uBAAhB;cAAsC;cAAE,EAAS;cAAa;cAAQ;;YAClE;aACF;;SACN,kBAAC,OAAD;UAAK,WAAU;oBAAf,CACE,kBAAC,QAAD;WAAM,WAAU;qBAAsB;WAAsB,CAAA,EAC5D,kBAAC,QAAD;WAAM,WAAU;qBAAhB,CAA+B,EAAS,gBAAe,IAAQ;aAC3D;;SACN,kBAAC,OAAD;UAAK,WAAU;oBAAf,CACE,kBAAC,QAAD;WAAM,WAAU;qBAAsB;WAAoB,CAAA,EAC1D,kBAAC,QAAD;WAAM,WAAU;qBAAhB,CAA+B,EAAS,cAAa,QAAY;aAC7D;;SACN,kBAAC,OAAD;UAAK,WAAU;oBAAf,CACE,kBAAC,QAAD;WAAM,WAAU;qBAAsB;WAAiB,CAAA,EACvD,kBAAC,QAAD;WAAM,WAAU;qBAAhB,CAA+B,EAAS,iBAAgB,SAAa;aACjE;;SACN,kBAAC,OAAD;UAAK,WAAU;oBAAf,CACE,kBAAC,QAAD;WAAM,WAAU;qBAAsB;WAAoB,CAAA,EAC1D,kBAAC,QAAD;WAAM,WAAU;qBAAe,EAAS;WAAyB,CAAA,CAC7D;;SACN,kBAAC,OAAD;UAAK,WAAU;oBAAf,CACE,kBAAC,QAAD;WAAM,WAAU;qBAAsB;WAAkB,CAAA,EACxD,kBAAC,QAAD;WAAM,WAAU;qBAAhB;YAA8B;YAAE,EAAS;YAAW;YAAU;aAC1D;;SACN,kBAAC,OAAD;UAAK,WAAU;oBAAf,CACE,kBAAC,QAAD;WAAM,WAAU;qBAAsB;WAAe,CAAA,EACrD,kBAAC,QAAD;WAAM,WAAU;qBAAe,EAAS;WAAgB,CAAA,CACpD;;SACF;;OAEN,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,KAAD;SAAG,WAAU;mBAA0C;SAAkB,CAAA,EACzE,kBAAC,OAAD;SAAK,WAAU;mBACZ,EAAS,eAAe,KAAK,MAC5B,kBAAC,GAAD;UAAkB,SAAQ;UAAY,WAAU;oBAC7C;UACK,EAFI,EAEJ,CACR;SACE,CAAA,CACF;;OAEN,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,KAAD;SAAG,WAAU;mBAA0C;SAAa,CAAA,EACpE,kBAAC,OAAD;SAAK,WAAU;mBACZ,EAAS,UAAU,KAAK,MACvB,kBAAC,GAAD;UAAkB,SAAQ;UAAU,WAAU;oBAC3C;UACK,EAFI,EAEJ,CACR;SACE,CAAA,CACF;;OAEN,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,GAAD;SAAQ,WAAU;SAAS,MAAK;SAAK,SAAQ;mBAA7C,CACE,kBAAC,GAAD,EAAM,WAAU,gBAAiB,CAAA,EAAA,gBAC1B;YACT,kBAAC,GAAD;SAAQ,WAAU;SAAS,MAAK;SAAK,SAAQ;mBAA7C,CACE,kBAAC,GAAD,EAAe,WAAU,gBAAiB,CAAA,EAAA,WACnC;WACL;;OACM;QACT,EAAA,CAAA,EAIT,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;MAAW,WAAU;gBAAY;MAAsB,CAAA,EAC5C,CAAA,EACb,kBAAC,GAAD;MAAa,WAAU;gBAAvB;OACE,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,QAAD;SAAM,WAAU;mBAAsB;SAAoB,CAAA,EAC1D,kBAAC,QAAD;SAAM,WAAU;mBAAhB,CAAiD,KAC7C,EAAQ,QAAQ,UAAU,gBAAgB,CACvC;WACH;;OACN,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,GAAD,EAAO,WAAU,WAAY,CAAA,EAC7B,kBAAC,QAAD,EAAA,UAAA;SAAM;SAAmB,EAAQ,SAAS;SAAQ;SAAY,EAAA,CAAA,CAC1D;;OACN,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,GAAD,EAAY,WAAU,WAAY,CAAA,EAClC,kBAAC,QAAD,EAAA,UAAA,CAAO,EAAQ,QAAQ,MAAK,iBAAqB,EAAA,CAAA,CAC7C;;OACN,kBAAC,GAAD;QAAQ,WAAU;QAAS,eAAe,EAAoB,GAAK;kBAAnE,CACE,kBAAC,GAAD,EAAU,WAAU,gBAAiB,CAAA,EAAA,YAC9B;;OACG;QACT,EAAA,CAAA,CACH;OACF;;GAGL,KACC,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,GAAD;KAAM,WAAU;eAAhB,CACE,kBAAC,GAAD,EAAA,UACE,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,GAAD,EAAA,UAAW,gBAAwB,CAAA,EACnC,kBAAC,GAAD;OAAQ,SAAQ;OAAU,MAAK;OAAK,eAAe,EAAoB,GAAM;iBAAE;OAEtE,CAAA,CACL;SACK,CAAA,EACb,kBAAC,GAAD;MAAa,WAAU;gBAAvB;OACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;QAAG,WAAU;kBAAe,EAAQ;QAAU,CAAA,EAC9C,kBAAC,KAAD;QAAG,WAAU;kBAAb,CAA2C,OAAI,EAAQ,aAAiB;UACpE,EAAA,CAAA;OAEN,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,KAAD;SAAG,WAAU;mBAAsB;SAAkB,CAAA,EACpD,EAAQ,SAAS,KAAK,MACrB,kBAAC,UAAD;SAEE,eAAe,EAAqB,EAAI,GAAG;SAC3C,WAAW,4DACT,MAAsB,EAAI,KACtB,0CACA;mBANR,CASE,kBAAC,OAAD;UAAK,WAAU;oBAAf,CACE,kBAAC,QAAD;WAAM,WAAU;qBAAe,EAAI;WAAY,CAAA,EAC/C,kBAAC,QAAD;WAAM,WAAU;qBAAhB,CAA4B,KAAE,EAAI,MAAM,gBAAgB,CAAQ;aAC5D;aACN,kBAAC,KAAD;UAAG,WAAU;oBAAb;WACG,EAAI;WAAY;WAAI,EAAI;WAAS;WAChC;YACG;WAfF,EAAI,GAeF,CACT,CACE;;OAEN,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,GAAD;SACE,SAAQ;SACR,WAAU;SACV,eAAe,EAAoB,GAAM;mBAC1C;SAEQ,CAAA,EACT,kBAAC,GAAD;SAAQ,WAAU;SAAS,UAAU,CAAC;mBAAmB;SAEhD,CAAA,CACL;;OACM;QACT;;IACH,CAAA;GAEJ"}
|
|
@@ -84,7 +84,7 @@ function x() {
|
|
|
84
84
|
className: "text-2xl font-semibold",
|
|
85
85
|
children: C("proserviceworld.services.title", "Services")
|
|
86
86
|
}), /* @__PURE__ */ p("p", {
|
|
87
|
-
className: "text-sm text-
|
|
87
|
+
className: "text-sm text-text-secondary",
|
|
88
88
|
children: I
|
|
89
89
|
})] }), /* @__PURE__ */ m("div", {
|
|
90
90
|
className: "flex items-center gap-2 mt-4 md:mt-0",
|
|
@@ -105,7 +105,7 @@ function x() {
|
|
|
105
105
|
className: "flex flex-col sm:flex-row gap-4",
|
|
106
106
|
children: [/* @__PURE__ */ m("div", {
|
|
107
107
|
className: "flex-1 relative",
|
|
108
|
-
children: [/* @__PURE__ */ p(c, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-
|
|
108
|
+
children: [/* @__PURE__ */ p(c, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-text-secondary" }), /* @__PURE__ */ p(y, {
|
|
109
109
|
placeholder: C("proserviceworld.services.search.placeholder", "Search services..."),
|
|
110
110
|
value: T,
|
|
111
111
|
onChange: (e) => {
|
|
@@ -118,7 +118,7 @@ function x() {
|
|
|
118
118
|
onChange: (e) => {
|
|
119
119
|
O(e.target.value), M(1);
|
|
120
120
|
},
|
|
121
|
-
className: "px-4 py-2 border border-
|
|
121
|
+
className: "px-4 py-2 border border-border-default rounded-md bg-bg-surface text-text-primary",
|
|
122
122
|
children: [
|
|
123
123
|
/* @__PURE__ */ p("option", {
|
|
124
124
|
value: "",
|
|
@@ -179,18 +179,18 @@ function x() {
|
|
|
179
179
|
children: e.title
|
|
180
180
|
}),
|
|
181
181
|
/* @__PURE__ */ p("p", {
|
|
182
|
-
className: "text-sm text-
|
|
182
|
+
className: "text-sm text-text-secondary mb-3 line-clamp-2",
|
|
183
183
|
children: e.description
|
|
184
184
|
}),
|
|
185
185
|
/* @__PURE__ */ m("div", {
|
|
186
186
|
className: "flex items-center gap-2 mb-3 text-sm",
|
|
187
187
|
children: [
|
|
188
188
|
/* @__PURE__ */ p("div", {
|
|
189
|
-
className: "h-6 w-6 rounded-full bg-
|
|
189
|
+
className: "h-6 w-6 rounded-full bg-bg-sunken flex items-center justify-center text-xs",
|
|
190
190
|
children: e.providerName.charAt(0)
|
|
191
191
|
}),
|
|
192
192
|
/* @__PURE__ */ p("span", {
|
|
193
|
-
className: "text-
|
|
193
|
+
className: "text-text-secondary",
|
|
194
194
|
children: e.providerName
|
|
195
195
|
}),
|
|
196
196
|
e.providerVerified && /* @__PURE__ */ p(S, {})
|
|
@@ -204,7 +204,7 @@ function x() {
|
|
|
204
204
|
/* @__PURE__ */ p(l, { className: "h-4 w-4 text-yellow-400 fill-current mr-1" }),
|
|
205
205
|
e.providerRating.toFixed(1),
|
|
206
206
|
/* @__PURE__ */ m("span", {
|
|
207
|
-
className: "text-
|
|
207
|
+
className: "text-text-secondary ml-1",
|
|
208
208
|
children: [
|
|
209
209
|
"(",
|
|
210
210
|
e.providerReviews,
|
|
@@ -220,12 +220,12 @@ function x() {
|
|
|
220
220
|
/* @__PURE__ */ p("div", {
|
|
221
221
|
className: "flex flex-wrap gap-1 mt-3",
|
|
222
222
|
children: e.tags.slice(0, 3).map((e) => /* @__PURE__ */ p("span", {
|
|
223
|
-
className: "inline-block px-2 py-0.5 bg-
|
|
223
|
+
className: "inline-block px-2 py-0.5 bg-bg-sunken text-xs rounded",
|
|
224
224
|
children: e
|
|
225
225
|
}, e))
|
|
226
226
|
}),
|
|
227
227
|
/* @__PURE__ */ m("div", {
|
|
228
|
-
className: "flex items-center gap-4 mt-3 pt-3 border-t text-xs text-
|
|
228
|
+
className: "flex items-center gap-4 mt-3 pt-3 border-t text-xs text-text-secondary",
|
|
229
229
|
children: [/* @__PURE__ */ m("span", {
|
|
230
230
|
className: "flex items-center",
|
|
231
231
|
children: [/* @__PURE__ */ p(i, { className: "h-3 w-3 mr-1" }), C("proserviceworld.services.card.meta.days", "{{count}} days", { count: e.duration.typical })]
|
|
@@ -248,11 +248,11 @@ function x() {
|
|
|
248
248
|
})]
|
|
249
249
|
}),
|
|
250
250
|
/* @__PURE__ */ p("p", {
|
|
251
|
-
className: "text-sm text-
|
|
251
|
+
className: "text-sm text-text-secondary mb-2 line-clamp-1",
|
|
252
252
|
children: e.description
|
|
253
253
|
}),
|
|
254
254
|
/* @__PURE__ */ m("div", {
|
|
255
|
-
className: "flex items-center gap-3 text-sm text-
|
|
255
|
+
className: "flex items-center gap-3 text-sm text-text-secondary",
|
|
256
256
|
children: [
|
|
257
257
|
/* @__PURE__ */ p("span", { children: e.providerName }),
|
|
258
258
|
/* @__PURE__ */ m("span", {
|
|
@@ -272,7 +272,7 @@ function x() {
|
|
|
272
272
|
className: "font-medium",
|
|
273
273
|
children: C("proserviceworld.services.card.pricing.from", "From ${{amount}}", { amount: e.pricing.basePrice.toLocaleString() })
|
|
274
274
|
}), /* @__PURE__ */ p("div", {
|
|
275
|
-
className: "text-sm text-
|
|
275
|
+
className: "text-sm text-text-secondary",
|
|
276
276
|
children: C("proserviceworld.services.card.meta.days", "{{count}} days", { count: e.duration.typical })
|
|
277
277
|
})]
|
|
278
278
|
})] })
|
|
@@ -281,13 +281,13 @@ function x() {
|
|
|
281
281
|
}) : /* @__PURE__ */ m("div", {
|
|
282
282
|
className: "text-center py-12",
|
|
283
283
|
children: [
|
|
284
|
-
/* @__PURE__ */ p(a, { className: "h-12 w-12 mx-auto text-
|
|
284
|
+
/* @__PURE__ */ p(a, { className: "h-12 w-12 mx-auto text-text-secondary mb-4" }),
|
|
285
285
|
/* @__PURE__ */ p("h3", {
|
|
286
286
|
className: "text-lg font-medium mb-2",
|
|
287
287
|
children: C("proserviceworld.services.empty.title", "No services found")
|
|
288
288
|
}),
|
|
289
289
|
/* @__PURE__ */ p("p", {
|
|
290
|
-
className: "text-
|
|
290
|
+
className: "text-text-secondary",
|
|
291
291
|
children: C("proserviceworld.shared.empty.adjustFilters", "Try adjusting your search criteria or filters.")
|
|
292
292
|
})
|
|
293
293
|
]
|