more

2025-11-25 17:14:52 -05:00
parent b2171fec3b
commit 0471810118
77 changed files with 1255 additions and 66 deletions
@@ -0,0 +1,87 @@
+// Simulated data functions - Replace these with API calls when ready
+// Example: export async function getPricingHistory(partId: string) { ... }
+
+export interface PriceHistoryPoint {
+  date: string; // ISO date string
+  price: number;
+}
+
+export interface RetailerOffer {
+  id: string;
+  retailerName: string;
+  price: number;
+  originalPrice?: number;
+  inStock: boolean;
+  affiliateUrl: string;
+  lastUpdated: string; // ISO date string
+}
+
+/**
+ * Get pricing history for a part
+ * TODO: Replace with API call: GET /api/parts/{partId}/pricing-history
+ */
+export function getPricingHistory(
+  partId: string,
+  basePrice: number,
+): PriceHistoryPoint[] {
+  // Generate 30 days of price history with some variation
+  const days = 30;
+  const history: PriceHistoryPoint[] = [];
+  const today = new Date();
+
+  for (let i = days - 1; i >= 0; i--) {
+    const date = new Date(today);
+    date.setDate(date.getDate() - i);
+
+    // Simulate price fluctuations (±15% variation)
+    const variation = (Math.random() - 0.5) * 0.3; // -15% to +15%
+    const price = basePrice * (1 + variation);
+
+    history.push({
+      date: date.toISOString().split("T")[0],
+      price: Math.round(price * 100) / 100,
+    });
+  }
+
+  return history;
+}
+
+/**
+ * Get retailer offers for a part
+ * TODO: Replace with API call: GET /api/parts/{partId}/retailers
+ */
+export function getRetailerOffers(
+  partId: string,
+  basePrice: number,
+  baseAffiliateUrl: string,
+): RetailerOffer[] {
+  const retailers = [
+    "Primary Arms",
+    "Brownells",
+    "Optics Planet",
+    "MidwayUSA",
+    "Palmetto State Armory",
+  ];
+
+  return retailers.map((retailer, index) => {
+    // Simulate price variations between retailers
+    const priceVariation = (Math.random() - 0.4) * 0.2; // -8% to +12%
+    const price = basePrice * (1 + priceVariation);
+    const hasSale = Math.random() > 0.6; // 40% chance of sale
+    const originalPrice = hasSale ? price * 1.15 : undefined;
+    const inStock = Math.random() > 0.2; // 80% chance in stock
+
+    return {
+      id: `retailer-${index}`,
+      retailerName: retailer,
+      price: Math.round(price * 100) / 100,
+      originalPrice: originalPrice
+        ? Math.round(originalPrice * 100) / 100
+        : undefined,
+      inStock,
+      affiliateUrl: baseAffiliateUrl.replace("example.com", `${retailer.toLowerCase().replace(/\s+/g, "")}.com`),
+      lastUpdated: new Date().toISOString(),
+    };
+  }).sort((a, b) => a.price - b.price); // Sort by price ascending
+}
+
@@ -5,6 +5,9 @@ import Link from "next/link";
 import { useParams } from "next/navigation";
 import { CATEGORIES, PARTS } from "@/data/gunbuilderParts";
 import type { CategoryId } from "@/types/gunbuilder";
+import { getPricingHistory, getRetailerOffers } from "./data";
+import { PricingHistoryGraph } from "@/components/PricingHistoryGraph";
+import { RetailersList } from "@/components/RetailersList";

 export default function PartDetailPage() {
  const params = useParams();
@@ -21,6 +24,21 @@ export default function PartDetailPage() {
    [partId, categoryId],
  );

+  // Get pricing history and retailer offers
+  // TODO: Replace with API calls when endpoints are ready
+  const pricingHistory = useMemo(
+    () => (part ? getPricingHistory(part.id, part.price) : []),
+    [part],
+  );
+
+  const retailerOffers = useMemo(
+    () =>
+      part
+        ? getRetailerOffers(part.id, part.price, part.affiliateUrl)
+        : [],
+    [part],
+  );
+
  if (!category || !part) {
    return (
      <main className="min-h-screen bg-black text-zinc-50">
@@ -68,76 +86,86 @@ export default function PartDetailPage() {
        {/* Product Details */}
        <div className="grid gap-4 lg:grid-cols-[2fr,1fr]">
          {/* Main Content */}
-          <section className="rounded-lg border border-zinc-800 bg-zinc-950/60 p-4 md:p-6">
-            <div className="grid gap-6 md:grid-cols-[1fr,1fr]">
-              {/* Product Info */}
-              <div>
-                <div className="text-xs font-semibold tracking-[0.16em] uppercase text-zinc-400 mb-2">
-                  Product Information
-                </div>
-                <div className="space-y-3">
-                  <div>
-                    <div className="text-xs text-zinc-500 uppercase tracking-wide mb-1">
-                      Brand
-                    </div>
-                    <div className="text-lg font-semibold text-zinc-50">
-                      {part.brand}
-                    </div>
+          <section className="space-y-4">
+            {/* Product Information */}
+            <div className="rounded-lg border border-zinc-800 bg-zinc-950/60 p-4 md:p-6">
+              <div className="grid gap-6 md:grid-cols-[1fr,1fr]">
+                {/* Product Info */}
+                <div>
+                  <div className="text-xs font-semibold tracking-[0.16em] uppercase text-zinc-400 mb-2">
+                    Product Information
                  </div>
-                  <div>
-                    <div className="text-xs text-zinc-500 uppercase tracking-wide mb-1">
-                      Model
-                    </div>
-                    <div className="text-lg font-semibold text-zinc-50">
-                      {part.name}
-                    </div>
-                  </div>
-                  <div>
-                    <div className="text-xs text-zinc-500 uppercase tracking-wide mb-1">
-                      Category
-                    </div>
-                    <div className="text-lg font-semibold text-zinc-50">
-                      {category.name}
-                    </div>
-                  </div>
-                  {part.notes && (
+                  <div className="space-y-3">
                    <div>
                      <div className="text-xs text-zinc-500 uppercase tracking-wide mb-1">
-                        Details
+                        Brand
                      </div>
-                      <div className="text-sm text-zinc-300 leading-relaxed">
-                        {part.notes}
+                      <div className="text-lg font-semibold text-zinc-50">
+                        {part.brand}
                      </div>
                    </div>
-                  )}
+                    <div>
+                      <div className="text-xs text-zinc-500 uppercase tracking-wide mb-1">
+                        Model
+                      </div>
+                      <div className="text-lg font-semibold text-zinc-50">
+                        {part.name}
+                      </div>
+                    </div>
+                    <div>
+                      <div className="text-xs text-zinc-500 uppercase tracking-wide mb-1">
+                        Category
+                      </div>
+                      <div className="text-lg font-semibold text-zinc-50">
+                        {category.name}
+                      </div>
+                    </div>
+                    {part.notes && (
+                      <div>
+                        <div className="text-xs text-zinc-500 uppercase tracking-wide mb-1">
+                          Details
+                        </div>
+                        <div className="text-sm text-zinc-300 leading-relaxed">
+                          {part.notes}
+                        </div>
+                      </div>
+                    )}
+                  </div>
                </div>
-              </div>

-              {/* Product Image */}
-              <div className="flex items-start justify-center">
-                <div className="w-full aspect-square max-w-md rounded-md border border-zinc-700 bg-zinc-900/50 flex items-center justify-center">
-                  <div className="text-center p-8">
-                    <svg
-                      className="w-16 h-16 mx-auto text-zinc-600 mb-2"
-                      fill="none"
-                      stroke="currentColor"
-                      viewBox="0 0 24 24"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth={1.5}
-                        d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
-                      />
-                    </svg>
-                    <p className="text-xs text-zinc-500 uppercase tracking-wide">
-                      Product Image
-                    </p>
+                {/* Product Image */}
+                <div className="flex items-start justify-center">
+                  <div className="w-full aspect-square max-w-md rounded-md border border-zinc-700 bg-zinc-900/50 flex items-center justify-center">
+                    <div className="text-center p-8">
+                      <svg
+                        className="w-16 h-16 mx-auto text-zinc-600 mb-2"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={1.5}
+                          d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+                        />
+                      </svg>
+                      <p className="text-xs text-zinc-500 uppercase tracking-wide">
+                        Product Image
+                      </p>
+                    </div>
                  </div>
                </div>
              </div>
            </div>
+
+            {/* Retailers List */}
+            {retailerOffers.length > 0 && (
+              <div className="rounded-lg border border-zinc-800 bg-zinc-950/60 p-4 md:p-6">
+                <RetailersList retailers={retailerOffers} />
+              </div>
+            )}
          </section>

          {/* Sidebar */}
@@ -149,6 +177,16 @@ export default function PartDetailPage() {
              </div>
            </div>

+            {/* Pricing History */}
+            {pricingHistory.length > 0 && (
+              <div className="mb-6">
+                <PricingHistoryGraph
+                  data={pricingHistory}
+                  currentPrice={part.price}
+                />
+              </div>
+            )}
+
            <div className="mt-auto space-y-3">
              <Link
                href={`/gunbuilder?select=${categoryId}:${part.id}`}