@burdenoff/microfe-proserviceworld 2026.509.101

package/dist/proserviceworld/pages/ReviewsPage.js

@@ -0,0 +1,339 @@
+import { useProServiceWorldStore as e } from "../store/proserviceworldStore.js";
+import { useMemo as t, useState as n } from "react";
+import { ArrowUpDown as r, Award as i, BarChart3 as a, Filter as o, MessageSquare as s, Search as c, Star as l, ThumbsDown as u, ThumbsUp as d, TrendingUp as f } from "lucide-react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { Badge as h, Button as g, Card as _, CardContent as v, CardHeader as y, CardTitle as b, Input as x } from "@burdenoff/fe-libs/ui";
+//#region src/proserviceworld/pages/ReviewsPage.tsx
+function S() {
+	let { reviews: S } = e(), [C, w] = n("received"), [T, E] = n(""), [D, O] = n(null), [k, A] = n("date"), [j, M] = n(!1), N = S.length > 0 ? (S.reduce((e, t) => e + t.rating, 0) / S.length).toFixed(1) : "0", P = S.length, F = S.filter((e) => e.rating >= 4).length, I = S.filter((e) => e.rating === 5).length, L = t(() => {
+		let e = {
+			5: 0,
+			4: 0,
+			3: 0,
+			2: 0,
+			1: 0
+		};
+		for (let t of S) e[t.rating] = (e[t.rating] ?? 0) + 1;
+		return e;
+	}, [S]), R = t(() => {
+		let e = [...S];
+		if (T.trim()) {
+			let t = T.toLowerCase();
+			e = e.filter((e) => e.comment.toLowerCase().includes(t) || e.clientName.toLowerCase().includes(t) || e.serviceName.toLowerCase().includes(t) || e.providerName.toLowerCase().includes(t));
+		}
+		return D !== null && (e = e.filter((e) => e.rating === D)), e.sort((e, t) => k === "date" ? new Date(t.createdAt).getTime() - new Date(e.createdAt).getTime() : k === "rating" ? t.rating - e.rating : t.helpful - e.helpful), e;
+	}, [
+		S,
+		T,
+		D,
+		k
+	]), z = (e) => Array.from({ length: 5 }, (t, n) => /* @__PURE__ */ p(l, { className: `h-4 w-4 ${n < e ? "fill-yellow-400 text-yellow-400" : "text-muted-foreground/30"}` }, n));
+	return /* @__PURE__ */ m("div", {
+		className: "space-y-6 p-6",
+		children: [
+			/* @__PURE__ */ m("div", {
+				className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between",
+				children: [/* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("h1", {
+					className: "text-2xl font-semibold",
+					children: "Reviews"
+				}), /* @__PURE__ */ p("p", {
+					className: "text-sm text-muted-foreground",
+					children: "View and manage your service reviews and ratings."
+				})] }), /* @__PURE__ */ m(g, {
+					size: "sm",
+					onClick: () => M(!0),
+					children: [/* @__PURE__ */ p(s, { className: "mr-2 h-4 w-4" }), " Write Review"]
+				})]
+			}),
+			/* @__PURE__ */ m("div", {
+				className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-4",
+				children: [
+					/* @__PURE__ */ p(_, { children: /* @__PURE__ */ p(v, {
+						className: "pt-4",
+						children: /* @__PURE__ */ m("div", {
+							className: "flex items-center gap-3",
+							children: [/* @__PURE__ */ p("div", {
+								className: "rounded-lg bg-yellow-100 p-2 dark:bg-yellow-950",
+								children: /* @__PURE__ */ p(l, { className: "h-5 w-5 text-yellow-600" })
+							}), /* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("p", {
+								className: "text-2xl font-bold",
+								children: N
+							}), /* @__PURE__ */ p("p", {
+								className: "text-xs text-muted-foreground",
+								children: "Average Rating"
+							})] })]
+						})
+					}) }),
+					/* @__PURE__ */ p(_, { children: /* @__PURE__ */ p(v, {
+						className: "pt-4",
+						children: /* @__PURE__ */ m("div", {
+							className: "flex items-center gap-3",
+							children: [/* @__PURE__ */ p("div", {
+								className: "rounded-lg bg-blue-100 p-2 dark:bg-blue-950",
+								children: /* @__PURE__ */ p(a, { className: "h-5 w-5 text-blue-600" })
+							}), /* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("p", {
+								className: "text-2xl font-bold",
+								children: P
+							}), /* @__PURE__ */ p("p", {
+								className: "text-xs text-muted-foreground",
+								children: "Total Reviews"
+							})] })]
+						})
+					}) }),
+					/* @__PURE__ */ p(_, { children: /* @__PURE__ */ p(v, {
+						className: "pt-4",
+						children: /* @__PURE__ */ m("div", {
+							className: "flex items-center gap-3",
+							children: [/* @__PURE__ */ p("div", {
+								className: "rounded-lg bg-green-100 p-2 dark:bg-green-950",
+								children: /* @__PURE__ */ p(f, { className: "h-5 w-5 text-green-600" })
+							}), /* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("p", {
+								className: "text-2xl font-bold",
+								children: F
+							}), /* @__PURE__ */ p("p", {
+								className: "text-xs text-muted-foreground",
+								children: "Positive (4-5 Stars)"
+							})] })]
+						})
+					}) }),
+					/* @__PURE__ */ p(_, { children: /* @__PURE__ */ p(v, {
+						className: "pt-4",
+						children: /* @__PURE__ */ m("div", {
+							className: "flex items-center gap-3",
+							children: [/* @__PURE__ */ p("div", {
+								className: "rounded-lg bg-purple-100 p-2 dark:bg-purple-950",
+								children: /* @__PURE__ */ p(i, { className: "h-5 w-5 text-purple-600" })
+							}), /* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("p", {
+								className: "text-2xl font-bold",
+								children: I
+							}), /* @__PURE__ */ p("p", {
+								className: "text-xs text-muted-foreground",
+								children: "5-Star Reviews"
+							})] })]
+						})
+					}) })
+				]
+			}),
+			/* @__PURE__ */ m(_, { children: [/* @__PURE__ */ p(y, { children: /* @__PURE__ */ p(b, {
+				className: "text-base",
+				children: "Rating Distribution"
+			}) }), /* @__PURE__ */ p(v, { children: /* @__PURE__ */ p("div", {
+				className: "space-y-2",
+				children: [
+					5,
+					4,
+					3,
+					2,
+					1
+				].map((e) => {
+					let t = L[e] ?? 0, n = P > 0 ? Math.round(t / P * 100) : 0;
+					return /* @__PURE__ */ m("button", {
+						onClick: () => O(D === e ? null : e),
+						className: `flex w-full items-center gap-3 rounded px-2 py-1 transition-colors ${D === e ? "bg-primary/10" : "hover:bg-muted/50"}`,
+						children: [
+							/* @__PURE__ */ m("span", {
+								className: "w-12 text-sm font-medium",
+								children: [e, " star"]
+							}),
+							/* @__PURE__ */ p("div", {
+								className: "flex-1 h-3 overflow-hidden rounded-full bg-muted",
+								children: /* @__PURE__ */ p("div", {
+									className: "h-3 rounded-full bg-yellow-400 transition-all",
+									style: { width: `${n}%` }
+								})
+							}),
+							/* @__PURE__ */ m("span", {
+								className: "w-16 text-right text-sm text-muted-foreground",
+								children: [
+									t,
+									" (",
+									n,
+									"%)"
+								]
+							})
+						]
+					}, e);
+				})
+			}) })] }),
+			/* @__PURE__ */ m("div", {
+				className: "flex flex-col gap-4 sm:flex-row sm:items-center",
+				children: [
+					/* @__PURE__ */ p("div", {
+						className: "flex rounded-lg border",
+						children: ["received", "given"].map((e) => /* @__PURE__ */ p("button", {
+							onClick: () => w(e),
+							className: `px-4 py-2 text-sm font-medium transition-colors ${C === e ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:bg-muted/50"}`,
+							children: e === "received" ? "Reviews Received" : "Reviews Given"
+						}, e))
+					}),
+					/* @__PURE__ */ m("div", {
+						className: "relative flex-1",
+						children: [/* @__PURE__ */ p(c, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }), /* @__PURE__ */ p(x, {
+							placeholder: "Search reviews...",
+							value: T,
+							onChange: (e) => E(e.target.value),
+							className: "pl-10"
+						})]
+					}),
+					/* @__PURE__ */ m("div", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ p(o, { className: "h-4 w-4 text-muted-foreground" }), [
+							{
+								field: "date",
+								label: "Newest"
+							},
+							{
+								field: "rating",
+								label: "Highest Rated"
+							},
+							{
+								field: "helpful",
+								label: "Most Helpful"
+							}
+						].map(({ field: e, label: t }) => /* @__PURE__ */ m("button", {
+							onClick: () => A(e),
+							className: `flex items-center gap-1 rounded border px-3 py-1 text-xs ${k === e ? "border-primary bg-primary/5 text-primary" : "text-muted-foreground hover:bg-muted/50"}`,
+							children: [/* @__PURE__ */ p(r, { className: "h-3 w-3" }), t]
+						}, e))]
+					})
+				]
+			}),
+			/* @__PURE__ */ p("div", {
+				className: "space-y-4",
+				children: R.length === 0 ? /* @__PURE__ */ p(_, { children: /* @__PURE__ */ p(v, {
+					className: "py-12 text-center text-muted-foreground",
+					children: "No reviews match your filters."
+				}) }) : R.map((e) => /* @__PURE__ */ p(_, { children: /* @__PURE__ */ p(v, {
+					className: "pt-6",
+					children: /* @__PURE__ */ m("div", {
+						className: "flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between",
+						children: [/* @__PURE__ */ m("div", {
+							className: "flex-1 space-y-3",
+							children: [
+								/* @__PURE__ */ m("div", {
+									className: "flex items-center gap-3",
+									children: [/* @__PURE__ */ p("div", {
+										className: "flex h-10 w-10 items-center justify-center rounded-full bg-primary/10 font-semibold text-primary",
+										children: e.clientName.charAt(0)
+									}), /* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("p", {
+										className: "font-medium",
+										children: e.clientName
+									}), /* @__PURE__ */ m("p", {
+										className: "text-xs text-muted-foreground",
+										children: [
+											e.serviceName,
+											" - ",
+											e.providerName
+										]
+									})] })]
+								}),
+								/* @__PURE__ */ m("div", {
+									className: "flex items-center gap-2",
+									children: [
+										/* @__PURE__ */ p("div", {
+											className: "flex",
+											children: z(e.rating)
+										}),
+										/* @__PURE__ */ m("span", {
+											className: "text-sm font-medium",
+											children: [e.rating, ".0"]
+										}),
+										e.recommended && /* @__PURE__ */ p(h, {
+											variant: "secondary",
+											className: "text-xs",
+											children: "Recommended"
+										})
+									]
+								}),
+								/* @__PURE__ */ p("p", {
+									className: "text-sm text-muted-foreground leading-relaxed",
+									children: e.comment
+								}),
+								/* @__PURE__ */ m("div", {
+									className: "flex flex-wrap gap-4 text-xs text-muted-foreground",
+									children: [
+										/* @__PURE__ */ m("span", { children: ["Project Value: $", e.projectValue.toLocaleString()] }),
+										/* @__PURE__ */ m("span", { children: [
+											"Duration: ",
+											e.projectDuration,
+											" days"
+										] }),
+										/* @__PURE__ */ p("span", { children: new Date(e.createdAt).toLocaleDateString() })
+									]
+								})
+							]
+						}), /* @__PURE__ */ m("div", {
+							className: "flex items-center gap-4 text-sm",
+							children: [/* @__PURE__ */ m("button", {
+								className: "flex items-center gap-1 text-muted-foreground hover:text-green-600",
+								children: [/* @__PURE__ */ p(d, { className: "h-4 w-4" }), /* @__PURE__ */ p("span", { children: e.helpful })]
+							}), /* @__PURE__ */ m("button", {
+								className: "flex items-center gap-1 text-muted-foreground hover:text-red-600",
+								children: [/* @__PURE__ */ p(u, { className: "h-4 w-4" }), /* @__PURE__ */ p("span", { children: e.notHelpful })]
+							})]
+						})]
+					})
+				}) }, e.id))
+			}),
+			j && /* @__PURE__ */ p("div", {
+				className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50",
+				children: /* @__PURE__ */ m(_, {
+					className: "mx-4 w-full max-w-lg",
+					children: [/* @__PURE__ */ p(y, { children: /* @__PURE__ */ m("div", {
+						className: "flex items-center justify-between",
+						children: [/* @__PURE__ */ p(b, { children: "Write a Review" }), /* @__PURE__ */ p(g, {
+							variant: "outline",
+							size: "sm",
+							onClick: () => M(!1),
+							children: "Close"
+						})]
+					}) }), /* @__PURE__ */ m(v, {
+						className: "space-y-4",
+						children: [
+							/* @__PURE__ */ m("div", {
+								className: "space-y-2",
+								children: [/* @__PURE__ */ p("label", {
+									className: "text-sm font-medium",
+									children: "Rating"
+								}), /* @__PURE__ */ p("div", {
+									className: "flex gap-1",
+									children: Array.from({ length: 5 }, (e, t) => /* @__PURE__ */ p("button", {
+										className: "text-muted-foreground hover:text-yellow-400",
+										children: /* @__PURE__ */ p(l, { className: "h-8 w-8" })
+									}, t))
+								})]
+							}),
+							/* @__PURE__ */ m("div", {
+								className: "space-y-2",
+								children: [/* @__PURE__ */ p("label", {
+									className: "text-sm font-medium",
+									children: "Your Review"
+								}), /* @__PURE__ */ p("textarea", {
+									className: "w-full rounded-md border bg-background px-3 py-2 text-sm",
+									rows: 4,
+									placeholder: "Share your experience with this service..."
+								})]
+							}),
+							/* @__PURE__ */ m("div", {
+								className: "flex gap-2",
+								children: [/* @__PURE__ */ p(g, {
+									variant: "outline",
+									className: "flex-1",
+									onClick: () => M(!1),
+									children: "Cancel"
+								}), /* @__PURE__ */ p(g, {
+									className: "flex-1",
+									children: "Submit Review"
+								})]
+							})
+						]
+					})]
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { S as ReviewsPage };
+
+//# sourceMappingURL=ReviewsPage.js.map

package/dist/proserviceworld/pages/ReviewsPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReviewsPage.js","names":[],"sources":["../../../src/proserviceworld/pages/ReviewsPage.tsx"],"sourcesContent":["import { useState, useMemo } from 'react';\nimport {\n  Badge,\n  Button,\n  Card,\n  CardContent,\n  CardHeader,\n  CardTitle,\n  Input,\n} from '@burdenoff/fe-libs/ui';\nimport {\n  Star,\n  Search,\n  ThumbsUp,\n  ThumbsDown,\n  Filter,\n  ArrowUpDown,\n  MessageSquare,\n  TrendingUp,\n  Award,\n  BarChart3,\n} from 'lucide-react';\nimport { useProServiceWorldStore } from '../store/proserviceworldStore';\n\ntype ViewMode = 'received' | 'given';\ntype SortBy = 'date' | 'rating' | 'helpful';\n\nexport function ReviewsPage() {\n  const { reviews } = useProServiceWorldStore();\n  const [viewMode, setViewMode] = useState<ViewMode>('received');\n  const [searchQuery, setSearchQuery] = useState('');\n  const [ratingFilter, setRatingFilter] = useState<number | null>(null);\n  const [sortBy, setSortBy] = useState<SortBy>('date');\n  const [showWriteModal, setShowWriteModal] = useState(false);\n\n  // Stats\n  const avgRating =\n    reviews.length > 0\n      ? (reviews.reduce((sum, r) => sum + r.rating, 0) / reviews.length).toFixed(1)\n      : '0';\n  const totalReviews = reviews.length;\n  const positiveReviews = reviews.filter((r) => r.rating >= 4).length;\n  const fiveStarCount = reviews.filter((r) => r.rating === 5).length;\n\n  // Rating distribution\n  const ratingDistribution = useMemo(() => {\n    const dist: Record<number, number> = { 5: 0, 4: 0, 3: 0, 2: 0, 1: 0 };\n    for (const r of reviews) {\n      dist[r.rating] = (dist[r.rating] ?? 0) + 1;\n    }\n    return dist;\n  }, [reviews]);\n\n  const filtered = useMemo(() => {\n    let result = [...reviews];\n\n    if (searchQuery.trim()) {\n      const q = searchQuery.toLowerCase();\n      result = result.filter(\n        (r) =>\n          r.comment.toLowerCase().includes(q) ||\n          r.clientName.toLowerCase().includes(q) ||\n          r.serviceName.toLowerCase().includes(q) ||\n          r.providerName.toLowerCase().includes(q)\n      );\n    }\n\n    if (ratingFilter !== null) {\n      result = result.filter((r) => r.rating === ratingFilter);\n    }\n\n    result.sort((a, b) => {\n      if (sortBy === 'date')\n        return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();\n      if (sortBy === 'rating') return b.rating - a.rating;\n      return b.helpful - a.helpful;\n    });\n\n    return result;\n  }, [reviews, searchQuery, ratingFilter, sortBy]);\n\n  const renderStars = (rating: number) => {\n    return Array.from({ length: 5 }, (_, i) => (\n      <Star\n        key={i}\n        className={`h-4 w-4 ${i < rating ? 'fill-yellow-400 text-yellow-400' : 'text-muted-foreground/30'}`}\n      />\n    ));\n  };\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      {/* Header */}\n      <div className=\"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\">\n        <div>\n          <h1 className=\"text-2xl font-semibold\">Reviews</h1>\n          <p className=\"text-sm text-muted-foreground\">\n            View and manage your service reviews and ratings.\n          </p>\n        </div>\n        <Button size=\"sm\" onClick={() => setShowWriteModal(true)}>\n          <MessageSquare className=\"mr-2 h-4 w-4\" /> Write Review\n        </Button>\n      </div>\n\n      {/* Stats Overview */}\n      <div className=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n        <Card>\n          <CardContent className=\"pt-4\">\n            <div className=\"flex items-center gap-3\">\n              <div className=\"rounded-lg bg-yellow-100 p-2 dark:bg-yellow-950\">\n                <Star className=\"h-5 w-5 text-yellow-600\" />\n              </div>\n              <div>\n                <p className=\"text-2xl font-bold\">{avgRating}</p>\n                <p className=\"text-xs text-muted-foreground\">Average Rating</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardContent className=\"pt-4\">\n            <div className=\"flex items-center gap-3\">\n              <div className=\"rounded-lg bg-blue-100 p-2 dark:bg-blue-950\">\n                <BarChart3 className=\"h-5 w-5 text-blue-600\" />\n              </div>\n              <div>\n                <p className=\"text-2xl font-bold\">{totalReviews}</p>\n                <p className=\"text-xs text-muted-foreground\">Total Reviews</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardContent className=\"pt-4\">\n            <div className=\"flex items-center gap-3\">\n              <div className=\"rounded-lg bg-green-100 p-2 dark:bg-green-950\">\n                <TrendingUp className=\"h-5 w-5 text-green-600\" />\n              </div>\n              <div>\n                <p className=\"text-2xl font-bold\">{positiveReviews}</p>\n                <p className=\"text-xs text-muted-foreground\">Positive (4-5 Stars)</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardContent className=\"pt-4\">\n            <div className=\"flex items-center gap-3\">\n              <div className=\"rounded-lg bg-purple-100 p-2 dark:bg-purple-950\">\n                <Award className=\"h-5 w-5 text-purple-600\" />\n              </div>\n              <div>\n                <p className=\"text-2xl font-bold\">{fiveStarCount}</p>\n                <p className=\"text-xs text-muted-foreground\">5-Star Reviews</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      </div>\n\n      {/* Rating Distribution */}\n      <Card>\n        <CardHeader>\n          <CardTitle className=\"text-base\">Rating Distribution</CardTitle>\n        </CardHeader>\n        <CardContent>\n          <div className=\"space-y-2\">\n            {[5, 4, 3, 2, 1].map((star) => {\n              const count = ratingDistribution[star] ?? 0;\n              const pct = totalReviews > 0 ? Math.round((count / totalReviews) * 100) : 0;\n              return (\n                <button\n                  key={star}\n                  onClick={() => setRatingFilter(ratingFilter === star ? null : star)}\n                  className={`flex w-full items-center gap-3 rounded px-2 py-1 transition-colors ${\n                    ratingFilter === star ? 'bg-primary/10' : 'hover:bg-muted/50'\n                  }`}\n                >\n                  <span className=\"w-12 text-sm font-medium\">{star} star</span>\n                  <div className=\"flex-1 h-3 overflow-hidden rounded-full bg-muted\">\n                    <div\n                      className=\"h-3 rounded-full bg-yellow-400 transition-all\"\n                      style={{ width: `${pct}%` }}\n                    />\n                  </div>\n                  <span className=\"w-16 text-right text-sm text-muted-foreground\">\n                    {count} ({pct}%)\n                  </span>\n                </button>\n              );\n            })}\n          </div>\n        </CardContent>\n      </Card>\n\n      {/* View Toggle + Filters */}\n      <div className=\"flex flex-col gap-4 sm:flex-row sm:items-center\">\n        <div className=\"flex rounded-lg border\">\n          {(['received', 'given'] as const).map((mode) => (\n            <button\n              key={mode}\n              onClick={() => setViewMode(mode)}\n              className={`px-4 py-2 text-sm font-medium transition-colors ${\n                viewMode === mode\n                  ? 'bg-primary text-primary-foreground'\n                  : 'text-muted-foreground hover:bg-muted/50'\n              }`}\n            >\n              {mode === 'received' ? 'Reviews Received' : 'Reviews Given'}\n            </button>\n          ))}\n        </div>\n\n        <div className=\"relative flex-1\">\n          <Search className=\"absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground\" />\n          <Input\n            placeholder=\"Search reviews...\"\n            value={searchQuery}\n            onChange={(e) => setSearchQuery(e.target.value)}\n            className=\"pl-10\"\n          />\n        </div>\n\n        <div className=\"flex items-center gap-2\">\n          <Filter className=\"h-4 w-4 text-muted-foreground\" />\n          {[\n            { field: 'date' as SortBy, label: 'Newest' },\n            { field: 'rating' as SortBy, label: 'Highest Rated' },\n            { field: 'helpful' as SortBy, label: 'Most Helpful' },\n          ].map(({ field, label }) => (\n            <button\n              key={field}\n              onClick={() => setSortBy(field)}\n              className={`flex items-center gap-1 rounded border px-3 py-1 text-xs ${\n                sortBy === field\n                  ? 'border-primary bg-primary/5 text-primary'\n                  : 'text-muted-foreground hover:bg-muted/50'\n              }`}\n            >\n              <ArrowUpDown className=\"h-3 w-3\" />\n              {label}\n            </button>\n          ))}\n        </div>\n      </div>\n\n      {/* Review List */}\n      <div className=\"space-y-4\">\n        {filtered.length === 0 ? (\n          <Card>\n            <CardContent className=\"py-12 text-center text-muted-foreground\">\n              No reviews match your filters.\n            </CardContent>\n          </Card>\n        ) : (\n          filtered.map((review) => (\n            <Card key={review.id}>\n              <CardContent className=\"pt-6\">\n                <div className=\"flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between\">\n                  <div className=\"flex-1 space-y-3\">\n                    <div className=\"flex items-center gap-3\">\n                      <div className=\"flex h-10 w-10 items-center justify-center rounded-full bg-primary/10 font-semibold text-primary\">\n                        {review.clientName.charAt(0)}\n                      </div>\n                      <div>\n                        <p className=\"font-medium\">{review.clientName}</p>\n                        <p className=\"text-xs text-muted-foreground\">\n                          {review.serviceName} - {review.providerName}\n                        </p>\n                      </div>\n                    </div>\n\n                    <div className=\"flex items-center gap-2\">\n                      <div className=\"flex\">{renderStars(review.rating)}</div>\n                      <span className=\"text-sm font-medium\">{review.rating}.0</span>\n                      {review.recommended && (\n                        <Badge variant=\"secondary\" className=\"text-xs\">\n                          Recommended\n                        </Badge>\n                      )}\n                    </div>\n\n                    <p className=\"text-sm text-muted-foreground leading-relaxed\">\n                      {review.comment}\n                    </p>\n\n                    <div className=\"flex flex-wrap gap-4 text-xs text-muted-foreground\">\n                      <span>Project Value: ${review.projectValue.toLocaleString()}</span>\n                      <span>Duration: {review.projectDuration} days</span>\n                      <span>{new Date(review.createdAt).toLocaleDateString()}</span>\n                    </div>\n                  </div>\n\n                  <div className=\"flex items-center gap-4 text-sm\">\n                    <button className=\"flex items-center gap-1 text-muted-foreground hover:text-green-600\">\n                      <ThumbsUp className=\"h-4 w-4\" />\n                      <span>{review.helpful}</span>\n                    </button>\n                    <button className=\"flex items-center gap-1 text-muted-foreground hover:text-red-600\">\n                      <ThumbsDown className=\"h-4 w-4\" />\n                      <span>{review.notHelpful}</span>\n                    </button>\n                  </div>\n                </div>\n              </CardContent>\n            </Card>\n          ))\n        )}\n      </div>\n\n      {/* Write Review Modal */}\n      {showWriteModal && (\n        <div className=\"fixed inset-0 z-50 flex items-center justify-center bg-black/50\">\n          <Card className=\"mx-4 w-full max-w-lg\">\n            <CardHeader>\n              <div className=\"flex items-center justify-between\">\n                <CardTitle>Write a Review</CardTitle>\n                <Button variant=\"outline\" size=\"sm\" onClick={() => setShowWriteModal(false)}>\n                  Close\n                </Button>\n              </div>\n            </CardHeader>\n            <CardContent className=\"space-y-4\">\n              <div className=\"space-y-2\">\n                <label className=\"text-sm font-medium\">Rating</label>\n                <div className=\"flex gap-1\">\n                  {Array.from({ length: 5 }, (_, i) => (\n                    <button key={i} className=\"text-muted-foreground hover:text-yellow-400\">\n                      <Star className=\"h-8 w-8\" />\n                    </button>\n                  ))}\n                </div>\n              </div>\n              <div className=\"space-y-2\">\n                <label className=\"text-sm font-medium\">Your Review</label>\n                <textarea\n                  className=\"w-full rounded-md border bg-background px-3 py-2 text-sm\"\n                  rows={4}\n                  placeholder=\"Share your experience with this service...\"\n                />\n              </div>\n              <div className=\"flex gap-2\">\n                <Button\n                  variant=\"outline\"\n                  className=\"flex-1\"\n                  onClick={() => setShowWriteModal(false)}\n                >\n                  Cancel\n                </Button>\n                <Button className=\"flex-1\">Submit Review</Button>\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;AA2BA,SAAgB,IAAc;CAC5B,IAAM,EAAE,eAAY,GAAyB,EACvC,CAAC,GAAU,KAAe,EAAmB,WAAW,EACxD,CAAC,GAAa,KAAkB,EAAS,GAAG,EAC5C,CAAC,GAAc,KAAmB,EAAwB,KAAK,EAC/D,CAAC,GAAQ,KAAa,EAAiB,OAAO,EAC9C,CAAC,GAAgB,KAAqB,EAAS,GAAM,EAGrD,IACJ,EAAQ,SAAS,KACZ,EAAQ,QAAQ,GAAK,MAAM,IAAM,EAAE,QAAQ,EAAE,GAAG,EAAQ,QAAQ,QAAQ,EAAE,GAC3E,KACA,IAAe,EAAQ,QACvB,IAAkB,EAAQ,QAAQ,MAAM,EAAE,UAAU,EAAE,CAAC,QACvD,IAAgB,EAAQ,QAAQ,MAAM,EAAE,WAAW,EAAE,CAAC,QAGtD,IAAqB,QAAc;EACvC,IAAM,IAA+B;GAAE,GAAG;GAAG,GAAG;GAAG,GAAG;GAAG,GAAG;GAAG,GAAG;GAAG;AACrE,OAAK,IAAM,KAAK,EACd,GAAK,EAAE,WAAW,EAAK,EAAE,WAAW,KAAK;AAE3C,SAAO;IACN,CAAC,EAAQ,CAAC,EAEP,IAAW,QAAc;EAC7B,IAAI,IAAS,CAAC,GAAG,EAAQ;AAEzB,MAAI,EAAY,MAAM,EAAE;GACtB,IAAM,IAAI,EAAY,aAAa;AACnC,OAAS,EAAO,QACb,MACC,EAAE,QAAQ,aAAa,CAAC,SAAS,EAAE,IACnC,EAAE,WAAW,aAAa,CAAC,SAAS,EAAE,IACtC,EAAE,YAAY,aAAa,CAAC,SAAS,EAAE,IACvC,EAAE,aAAa,aAAa,CAAC,SAAS,EAAE,CAC3C;;AAcH,SAXI,MAAiB,SACnB,IAAS,EAAO,QAAQ,MAAM,EAAE,WAAW,EAAa,GAG1D,EAAO,MAAM,GAAG,MACV,MAAW,SACN,IAAI,KAAK,EAAE,UAAU,CAAC,SAAS,GAAG,IAAI,KAAK,EAAE,UAAU,CAAC,SAAS,GACtE,MAAW,WAAiB,EAAE,SAAS,EAAE,SACtC,EAAE,UAAU,EAAE,QACrB,EAEK;IACN;EAAC;EAAS;EAAa;EAAc;EAAO,CAAC,EAE1C,KAAe,MACZ,MAAM,KAAK,EAAE,QAAQ,GAAG,GAAG,GAAG,MACnC,kBAAC,GAAD,EAEE,WAAW,WAAW,IAAI,IAAS,oCAAoC,8BACvE,EAFK,EAEL,CACF;AAGJ,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GAEE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,MAAD;KAAI,WAAU;eAAyB;KAAY,CAAA,EACnD,kBAAC,KAAD;KAAG,WAAU;eAAgC;KAEzC,CAAA,CACA,EAAA,CAAA,EACN,kBAAC,GAAD;KAAQ,MAAK;KAAK,eAAe,EAAkB,GAAK;eAAxD,CACE,kBAAC,GAAD,EAAe,WAAU,gBAAiB,CAAA,EAAA,gBACnC;OACL;;GAGN,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;MAAa,WAAU;gBACrB,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,OAAD;QAAK,WAAU;kBACb,kBAAC,GAAD,EAAM,WAAU,2BAA4B,CAAA;QACxC,CAAA,EACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;QAAG,WAAU;kBAAsB;QAAc,CAAA,EACjD,kBAAC,KAAD;QAAG,WAAU;kBAAgC;QAAkB,CAAA,CAC3D,EAAA,CAAA,CACF;;MACM,CAAA,EACT,CAAA;KACP,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;MAAa,WAAU;gBACrB,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,OAAD;QAAK,WAAU;kBACb,kBAAC,GAAD,EAAW,WAAU,yBAA0B,CAAA;QAC3C,CAAA,EACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;QAAG,WAAU;kBAAsB;QAAiB,CAAA,EACpD,kBAAC,KAAD;QAAG,WAAU;kBAAgC;QAAiB,CAAA,CAC1D,EAAA,CAAA,CACF;;MACM,CAAA,EACT,CAAA;KACP,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;MAAa,WAAU;gBACrB,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,OAAD;QAAK,WAAU;kBACb,kBAAC,GAAD,EAAY,WAAU,0BAA2B,CAAA;QAC7C,CAAA,EACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;QAAG,WAAU;kBAAsB;QAAoB,CAAA,EACvD,kBAAC,KAAD;QAAG,WAAU;kBAAgC;QAAwB,CAAA,CACjE,EAAA,CAAA,CACF;;MACM,CAAA,EACT,CAAA;KACP,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;MAAa,WAAU;gBACrB,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,OAAD;QAAK,WAAU;kBACb,kBAAC,GAAD,EAAO,WAAU,2BAA4B,CAAA;QACzC,CAAA,EACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;QAAG,WAAU;kBAAsB;QAAkB,CAAA,EACrD,kBAAC,KAAD;QAAG,WAAU;kBAAgC;QAAkB,CAAA,CAC3D,EAAA,CAAA,CACF;;MACM,CAAA,EACT,CAAA;KACH;;GAGN,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;IAAW,WAAU;cAAY;IAA+B,CAAA,EACrD,CAAA,EACb,kBAAC,GAAD,EAAA,UACE,kBAAC,OAAD;IAAK,WAAU;cACZ;KAAC;KAAG;KAAG;KAAG;KAAG;KAAE,CAAC,KAAK,MAAS;KAC7B,IAAM,IAAQ,EAAmB,MAAS,GACpC,IAAM,IAAe,IAAI,KAAK,MAAO,IAAQ,IAAgB,IAAI,GAAG;AAC1E,YACE,kBAAC,UAAD;MAEE,eAAe,EAAgB,MAAiB,IAAO,OAAO,EAAK;MACnE,WAAW,sEACT,MAAiB,IAAO,kBAAkB;gBAJ9C;OAOE,kBAAC,QAAD;QAAM,WAAU;kBAAhB,CAA4C,GAAK,QAAY;;OAC7D,kBAAC,OAAD;QAAK,WAAU;kBACb,kBAAC,OAAD;SACE,WAAU;SACV,OAAO,EAAE,OAAO,GAAG,EAAI,IAAI;SAC3B,CAAA;QACE,CAAA;OACN,kBAAC,QAAD;QAAM,WAAU;kBAAhB;SACG;SAAM;SAAG;SAAI;SACT;;OACA;QAhBF,EAgBE;MAEX;IACE,CAAA,EACM,CAAA,CACT,EAAA,CAAA;GAGP,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,OAAD;MAAK,WAAU;gBACX,CAAC,YAAY,QAAQ,CAAW,KAAK,MACrC,kBAAC,UAAD;OAEE,eAAe,EAAY,EAAK;OAChC,WAAW,mDACT,MAAa,IACT,uCACA;iBAGL,MAAS,aAAa,qBAAqB;OACrC,EATF,EASE,CACT;MACE,CAAA;KAEN,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,GAAD,EAAQ,WAAU,0EAA2E,CAAA,EAC7F,kBAAC,GAAD;OACE,aAAY;OACZ,OAAO;OACP,WAAW,MAAM,EAAe,EAAE,OAAO,MAAM;OAC/C,WAAU;OACV,CAAA,CACE;;KAEN,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,GAAD,EAAQ,WAAU,iCAAkC,CAAA,EACnD;OACC;QAAE,OAAO;QAAkB,OAAO;QAAU;OAC5C;QAAE,OAAO;QAAoB,OAAO;QAAiB;OACrD;QAAE,OAAO;QAAqB,OAAO;QAAgB;OACtD,CAAC,KAAK,EAAE,UAAO,eACd,kBAAC,UAAD;OAEE,eAAe,EAAU,EAAM;OAC/B,WAAW,4DACT,MAAW,IACP,6CACA;iBANR,CASE,kBAAC,GAAD,EAAa,WAAU,WAAY,CAAA,EAClC,EACM;SAVF,EAUE,CACT,CACE;;KACF;;GAGN,kBAAC,OAAD;IAAK,WAAU;cACZ,EAAS,WAAW,IACnB,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;KAAa,WAAU;eAA0C;KAEnD,CAAA,EACT,CAAA,GAEP,EAAS,KAAK,MACZ,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;KAAa,WAAU;eACrB,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,OAAD;OAAK,WAAU;iBAAf;QACE,kBAAC,OAAD;SAAK,WAAU;mBAAf,CACE,kBAAC,OAAD;UAAK,WAAU;oBACZ,EAAO,WAAW,OAAO,EAAE;UACxB,CAAA,EACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;UAAG,WAAU;oBAAe,EAAO;UAAe,CAAA,EAClD,kBAAC,KAAD;UAAG,WAAU;oBAAb;WACG,EAAO;WAAY;WAAI,EAAO;WAC7B;YACA,EAAA,CAAA,CACF;;QAEN,kBAAC,OAAD;SAAK,WAAU;mBAAf;UACE,kBAAC,OAAD;WAAK,WAAU;qBAAQ,EAAY,EAAO,OAAO;WAAO,CAAA;UACxD,kBAAC,QAAD;WAAM,WAAU;qBAAhB,CAAuC,EAAO,QAAO,KAAS;;UAC7D,EAAO,eACN,kBAAC,GAAD;WAAO,SAAQ;WAAY,WAAU;qBAAU;WAEvC,CAAA;UAEN;;QAEN,kBAAC,KAAD;SAAG,WAAU;mBACV,EAAO;SACN,CAAA;QAEJ,kBAAC,OAAD;SAAK,WAAU;mBAAf;UACE,kBAAC,QAAD,EAAA,UAAA,CAAM,oBAAiB,EAAO,aAAa,gBAAgB,CAAQ,EAAA,CAAA;UACnE,kBAAC,QAAD,EAAA,UAAA;WAAM;WAAW,EAAO;WAAgB;WAAY,EAAA,CAAA;UACpD,kBAAC,QAAD,EAAA,UAAO,IAAI,KAAK,EAAO,UAAU,CAAC,oBAAoB,EAAQ,CAAA;UAC1D;;QACF;UAEN,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,UAAD;QAAQ,WAAU;kBAAlB,CACE,kBAAC,GAAD,EAAU,WAAU,WAAY,CAAA,EAChC,kBAAC,QAAD,EAAA,UAAO,EAAO,SAAe,CAAA,CACtB;WACT,kBAAC,UAAD;QAAQ,WAAU;kBAAlB,CACE,kBAAC,GAAD,EAAY,WAAU,WAAY,CAAA,EAClC,kBAAC,QAAD,EAAA,UAAO,EAAO,YAAkB,CAAA,CACzB;UACL;SACF;;KACM,CAAA,EACT,EAjDI,EAAO,GAiDX,CACP;IAEA,CAAA;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,kBAA0B,CAAA,EACrC,kBAAC,GAAD;OAAQ,SAAQ;OAAU,MAAK;OAAK,eAAe,EAAkB,GAAM;iBAAE;OAEpE,CAAA,CACL;SACK,CAAA,EACb,kBAAC,GAAD;MAAa,WAAU;gBAAvB;OACE,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,SAAD;SAAO,WAAU;mBAAsB;SAAc,CAAA,EACrD,kBAAC,OAAD;SAAK,WAAU;mBACZ,MAAM,KAAK,EAAE,QAAQ,GAAG,GAAG,GAAG,MAC7B,kBAAC,UAAD;UAAgB,WAAU;oBACxB,kBAAC,GAAD,EAAM,WAAU,WAAY,CAAA;UACrB,EAFI,EAEJ,CACT;SACE,CAAA,CACF;;OACN,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,SAAD;SAAO,WAAU;mBAAsB;SAAmB,CAAA,EAC1D,kBAAC,YAAD;SACE,WAAU;SACV,MAAM;SACN,aAAY;SACZ,CAAA,CACE;;OACN,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,GAAD;SACE,SAAQ;SACR,WAAU;SACV,eAAe,EAAkB,GAAM;mBACxC;SAEQ,CAAA,EACT,kBAAC,GAAD;SAAQ,WAAU;mBAAS;SAAsB,CAAA,CAC7C;;OACM;QACT;;IACH,CAAA;GAEJ"}

package/dist/proserviceworld/pages/ServiceDetailsPage.d.ts

@@ -0,0 +1,2 @@
+export declare function ServiceDetailsPage(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ServiceDetailsPage.d.ts.map

package/dist/proserviceworld/pages/ServiceDetailsPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ServiceDetailsPage.d.ts","sourceRoot":"","sources":["../../../src/proserviceworld/pages/ServiceDetailsPage.tsx"],"names":[],"mappings":"AAwBA,wBAAgB,kBAAkB,4CA2bjC"}