This commit is contained in:
2025-11-25 16:26:54 -05:00
commit 1c07310c44
114 changed files with 17175 additions and 0 deletions
@@ -0,0 +1,174 @@
"use client";
import { useMemo } from "react";
import Link from "next/link";
import { useParams } from "next/navigation";
import { CATEGORIES, PARTS } from "@/data/gunbuilderParts";
import type { CategoryId } from "@/types/gunbuilder";
export default function PartDetailPage() {
const params = useParams();
const categoryId = params.categoryId as CategoryId;
const partId = params.partId as string;
const category = useMemo(
() => CATEGORIES.find((c) => c.id === categoryId),
[categoryId],
);
const part = useMemo(
() => PARTS.find((p) => p.id === partId && p.categoryId === categoryId),
[partId, categoryId],
);
if (!category || !part) {
return (
<main className="min-h-screen bg-black text-zinc-50">
<div className="mx-auto max-w-6xl px-4 py-6 lg:py-10">
<div className="text-center">
<h1 className="text-2xl font-semibold text-zinc-50 mb-4">
Product Not Found
</h1>
<Link
href="/gunbuilder"
className="text-amber-300 hover:text-amber-200 underline"
>
Return to Gunbuilder
</Link>
</div>
</div>
</main>
);
}
return (
<main className="min-h-screen bg-black text-zinc-50">
<div className="mx-auto max-w-6xl px-4 py-6 lg:py-10">
{/* Header */}
<header className="mb-6">
<Link
href={`/gunbuilder/${categoryId}`}
className="text-xs text-zinc-400 hover:text-zinc-300 mb-4 inline-block"
>
Back to {category.name}
</Link>
<div>
<p className="text-xs font-semibold tracking-[0.2em] uppercase text-zinc-500">
Shadow Standard
</p>
<h1 className="mt-1 text-2xl md:text-3xl font-semibold tracking-tight">
{part.brand} <span className="text-amber-300">{part.name}</span>
</h1>
<p className="mt-2 text-sm text-zinc-400 max-w-xl">
{category.name} Product Details
</p>
</div>
</header>
{/* 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>
</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>
{/* 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>
</section>
{/* Sidebar */}
<aside className="rounded-lg border border-zinc-800 bg-zinc-950/80 p-4 md:p-6 flex flex-col">
<div className="mb-4">
<div className="text-xs text-zinc-400 mb-2">Price</div>
<div className="text-3xl font-semibold text-amber-300">
${part.price.toFixed(2)}
</div>
</div>
<div className="mt-auto space-y-3">
<Link
href={`/gunbuilder?select=${categoryId}:${part.id}`}
className="block w-full rounded-md border border-amber-400/60 bg-amber-400/10 px-4 py-3 text-sm font-medium text-amber-200 hover:bg-amber-400/15 text-center transition-colors"
>
Add to Build
</Link>
<a
href={part.affiliateUrl}
target="_blank"
rel="noopener noreferrer"
className="block w-full rounded-md border border-zinc-700 bg-zinc-900/50 px-4 py-3 text-sm font-medium text-zinc-300 hover:bg-zinc-800 hover:border-zinc-600 text-center transition-colors"
>
View Retailer
</a>
</div>
</aside>
</div>
</div>
</main>
);
}
+187
View File
@@ -0,0 +1,187 @@
"use client";
import { useMemo, useState } from "react";
import Link from "next/link";
import { useParams } from "next/navigation";
import { CATEGORIES, PARTS } from "@/data/gunbuilderParts";
import type { CategoryId } from "@/types/gunbuilder";
type ViewMode = "card" | "list";
export default function CategoryPage() {
const params = useParams();
const categoryId = params.categoryId as CategoryId;
const [viewMode, setViewMode] = useState<ViewMode>("card");
const category = useMemo(
() => CATEGORIES.find((c) => c.id === categoryId),
[categoryId],
);
const parts = useMemo(
() => PARTS.filter((p) => p.categoryId === categoryId),
[categoryId],
);
if (!category) {
return (
<main className="min-h-screen bg-black text-zinc-50">
<div className="mx-auto max-w-6xl px-4 py-6 lg:py-10">
<div className="text-center">
<h1 className="text-2xl font-semibold text-zinc-50 mb-4">
Category Not Found
</h1>
<Link
href="/gunbuilder"
className="text-amber-300 hover:text-amber-200 underline"
>
Return to Gunbuilder
</Link>
</div>
</div>
</main>
);
}
return (
<main className="min-h-screen bg-black text-zinc-50">
<div className="mx-auto max-w-6xl px-4 py-6 lg:py-10">
{/* Header */}
<header className="mb-6">
<Link
href="/gunbuilder"
className="text-xs text-zinc-400 hover:text-zinc-300 mb-4 inline-block"
>
Back to Gunbuilder
</Link>
<div className="flex items-start justify-between gap-4">
<div>
<p className="text-xs font-semibold tracking-[0.2em] uppercase text-zinc-500">
Shadow Standard
</p>
<h1 className="mt-1 text-2xl md:text-3xl font-semibold tracking-tight">
{category.name} <span className="text-amber-300">Parts</span>
</h1>
<p className="mt-2 text-sm text-zinc-400 max-w-xl">
Browse all available {category.name.toLowerCase()} options for your
build.
</p>
</div>
{parts.length > 0 && (
<div className="flex gap-2 border border-zinc-800 rounded-md p-1 bg-zinc-950/60">
<button
type="button"
onClick={() => setViewMode("card")}
className={`px-3 py-1.5 text-xs font-medium rounded transition-colors ${
viewMode === "card"
? "bg-zinc-800 text-zinc-50"
: "text-zinc-400 hover:text-zinc-300"
}`}
aria-label="Card view"
>
Card
</button>
<button
type="button"
onClick={() => setViewMode("list")}
className={`px-3 py-1.5 text-xs font-medium rounded transition-colors ${
viewMode === "list"
? "bg-zinc-800 text-zinc-50"
: "text-zinc-400 hover:text-zinc-300"
}`}
aria-label="List view"
>
List
</button>
</div>
)}
</div>
</header>
{/* Parts Grid/List */}
<section className="rounded-lg border border-zinc-800 bg-zinc-950/60 p-3 md:p-4">
{parts.length === 0 ? (
<p className="text-sm text-zinc-500 text-center py-8">
No parts available for this category yet.
</p>
) : viewMode === "card" ? (
<div className="grid gap-3 md:grid-cols-2 lg:grid-cols-3">
{parts.map((part) => (
<div
key={part.id}
className="border border-zinc-700 rounded-md p-3 bg-zinc-900/50 hover:border-zinc-600 transition-colors flex flex-col"
>
<Link
href={`/gunbuilder?select=${categoryId}:${part.id}`}
className="flex-1"
>
<div className="flex justify-between items-center gap-2 mb-3">
<div className="flex-1">
<div className="text-sm font-semibold text-zinc-50">
{part.brand} <span className="font-normal"> {part.name}</span>
</div>
{part.notes && (
<p className="mt-1 text-xs text-zinc-400 line-clamp-2">
{part.notes}
</p>
)}
</div>
<div className="text-sm font-semibold text-amber-300 whitespace-nowrap">
${part.price.toFixed(2)}
</div>
</div>
</Link>
<Link
href={`/gunbuilder/${categoryId}/${part.id}`}
className="w-full rounded-md border border-zinc-700 bg-zinc-800/50 px-3 py-2 text-xs font-medium text-zinc-300 hover:bg-zinc-700 hover:border-zinc-600 transition-colors text-center"
>
View Details
</Link>
</div>
))}
</div>
) : (
<div className="space-y-2">
{parts.map((part) => (
<div
key={part.id}
className="border border-zinc-700 rounded-md p-3 bg-zinc-900/50 hover:border-zinc-600 transition-colors"
>
<div className="flex items-center justify-between gap-4">
<div className="flex-1 min-w-0">
<Link
href={`/gunbuilder?select=${categoryId}:${part.id}`}
className="block"
>
<div className="text-sm font-semibold text-zinc-50">
{part.brand} <span className="font-normal"> {part.name}</span>
</div>
{part.notes && (
<p className="mt-1 text-xs text-zinc-400 line-clamp-1">
{part.notes}
</p>
)}
</Link>
</div>
<div className="flex items-center gap-3">
<div className="text-sm font-semibold text-amber-300 whitespace-nowrap">
${part.price.toFixed(2)}
</div>
<Link
href={`/gunbuilder/${categoryId}/${part.id}`}
className="rounded-md border border-zinc-700 bg-zinc-800/50 px-3 py-1.5 text-xs font-medium text-zinc-300 hover:bg-zinc-700 hover:border-zinc-600 transition-colors whitespace-nowrap"
>
View Details
</Link>
</div>
</div>
</div>
))}
</div>
)}
</section>
</div>
</main>
);
}
+168
View File
@@ -0,0 +1,168 @@
"use client";
import { useMemo, useState } from "react";
import { CATEGORIES, PARTS } from "@/data/gunbuilderParts";
import type { CategoryId, Part } from "@/types/gunbuilder";
import { CategoryColumn } from "@/components/CategoryColumn";
type BuildState = Partial<Record<CategoryId, string>>; // categoryId -> partId
export default function GunbuilderPage() {
const [build, setBuild] = useState<BuildState>({});
const partsByCategory: Record<CategoryId, Part[]> = useMemo(() => {
const grouped = {} as Record<CategoryId, Part[]>;
for (const category of CATEGORIES) {
grouped[category.id] = PARTS.filter(
(p) => p.categoryId === category.id,
);
}
return grouped;
}, []);
const selectedParts: Part[] = useMemo(() => {
return Object.entries(build)
.map(([categoryId, partId]) =>
PARTS.find((p) => p.id === partId && p.categoryId === categoryId),
)
.filter(Boolean) as Part[];
}, [build]);
const totalPrice = useMemo(
() => selectedParts.reduce((sum, p) => sum + p.price, 0),
[selectedParts],
);
const handleSelectPart = (categoryId: CategoryId, partId: string) => {
setBuild((prev) => ({
...prev,
[categoryId]: partId,
}));
};
return (
<main className="min-h-screen bg-black text-zinc-50">
<div className="mx-auto max-w-6xl px-4 py-6 lg:py-10">
{/* Header */}
<header className="mb-6 flex flex-col gap-2 md:flex-row md:items-end md:justify-between">
<div>
<p className="text-xs font-semibold tracking-[0.2em] uppercase text-zinc-500">
Shadow Standard
</p>
<h1 className="mt-1 text-2xl md:text-3xl font-semibold tracking-tight">
Gunbuilder <span className="text-amber-300">Prototype</span>
</h1>
<p className="mt-2 text-sm text-zinc-400 max-w-xl">
Choose one part per category to assemble an AR-15 build. Prices
and links are mock data for nowbut the flow is close to what
the real tool will be.
</p>
</div>
<div className="mt-3 md:mt-0">
<div className="text-xs text-zinc-400">Current build total</div>
<div className="text-2xl font-semibold text-amber-300">
${totalPrice.toFixed(2)}
</div>
<div className="text-xs text-zinc-500">
{selectedParts.length} / {CATEGORIES.length} categories filled
</div>
</div>
</header>
{/* Layout */}
<div className="grid gap-4 lg:grid-cols-[3fr,1.25fr]">
{/* Categories/parts */}
<section className="rounded-lg border border-zinc-800 bg-zinc-950/60 p-3 md:p-4">
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
{CATEGORIES.map((category) => (
<div
key={category.id}
className="border border-zinc-800 rounded-md p-2 md:p-3 bg-zinc-950/60"
>
<CategoryColumn
category={category}
parts={partsByCategory[category.id]}
selectedPartId={build[category.id]}
onSelectPart={(partId) =>
handleSelectPart(category.id, partId)
}
/>
</div>
))}
</div>
</section>
{/* Build Summary */}
<aside className="rounded-lg border border-zinc-800 bg-zinc-950/80 p-3 md:p-4 flex flex-col">
<h2 className="text-xs font-semibold tracking-[0.16em] uppercase text-zinc-400 mb-3">
Current Build
</h2>
<div className="flex-1 overflow-y-auto pr-1">
{selectedParts.length === 0 && (
<p className="text-sm text-zinc-500">
Select a part from each category to start your build.
</p>
)}
<ul className="space-y-2">
{CATEGORIES.map((cat) => {
const selectedPartId = build[cat.id];
const part = PARTS.find(
(p) => p.id === selectedPartId && p.categoryId === cat.id,
);
return (
<li key={cat.id}>
<div className="text-[0.7rem] uppercase tracking-[0.16em] text-zinc-500">
{cat.name}
</div>
{part ? (
<div className="mt-1 flex justify-between items-center gap-2">
<div className="text-sm text-zinc-50">
<span className="text-zinc-400">
{part.brand}{" "}
</span>
{part.name}
</div>
<div className="text-xs font-semibold text-amber-300 whitespace-nowrap">
${part.price.toFixed(2)}
</div>
</div>
) : (
<div className="mt-1 text-xs text-zinc-600">
Not selected
</div>
)}
</li>
);
})}
</ul>
</div>
{/* CTA */}
<div className="mt-4 border-t border-zinc-800 pt-3">
<button
type="button"
className="w-full rounded-md border border-amber-400/60 bg-amber-400/10 px-3 py-2 text-sm font-medium text-amber-200 hover:bg-amber-400/15 disabled:opacity-40 disabled:cursor-not-allowed"
disabled={selectedParts.length === 0}
onClick={() => {
console.log("Build:", build);
alert(
"Prototype only: in the real app this would go to a sharable build summary with affiliate links.",
);
}}
>
Continue to Buy (Prototype)
</button>
<p className="mt-2 text-[0.7rem] text-zinc-500">
In the production version, this will take you to a build page with
retailer links and sharing options.
</p>
</div>
</aside>
</div>
</div>
</main>
);
}
+190
View File
@@ -0,0 +1,190 @@
-- ============================================
-- Gunbuilder / AvantLink Schema DDL
-- ============================================
-- Enable extension for UUID generation (if not already enabled)
CREATE EXTENSION IF NOT EXISTS pgcrypto;
-- ============================================
-- 1. merchants
-- ============================================
CREATE TABLE merchants (
id SERIAL PRIMARY KEY,
name TEXT NOT NULL,
avantlink_mid TEXT NOT NULL UNIQUE, -- AvantLink merchant ID
feed_url TEXT NOT NULL, -- Product datafeed URL
is_active BOOLEAN NOT NULL DEFAULT TRUE,
created_at TIMESTAMPTZ NOT NULL DEFAULT NOW(),
updated_at TIMESTAMPTZ NOT NULL DEFAULT NOW()
);
CREATE INDEX idx_merchants_active ON merchants (is_active);
-- ============================================
-- 2. part_categories
-- Your internal Gunbuilder categories
-- ============================================
CREATE TABLE part_categories (
id SERIAL PRIMARY KEY,
slug TEXT NOT NULL UNIQUE, -- 'lower', 'upper', 'barrel', etc.
name TEXT NOT NULL, -- 'Lower Receiver'
description TEXT
);
-- ============================================
-- 3. brands
-- ============================================
CREATE TABLE brands (
id SERIAL PRIMARY KEY,
name TEXT NOT NULL UNIQUE, -- 'Aero Precision'
website TEXT,
created_at TIMESTAMPTZ NOT NULL DEFAULT NOW()
);
-- ============================================
-- 4. products
-- Canonical parts, independent of merchants
-- ============================================
CREATE TABLE products (
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
brand_id INTEGER REFERENCES brands(id),
part_category_id INTEGER NOT NULL REFERENCES part_categories(id),
name TEXT NOT NULL,
slug TEXT NOT NULL UNIQUE,
description TEXT,
caliber TEXT,
barrel_length_mm INTEGER,
gas_system TEXT,
handguard_length_mm INTEGER,
image_url TEXT,
spec_sheet_url TEXT,
msrp NUMERIC(10,2),
current_lowest_price NUMERIC(10,2),
current_lowest_merchant_id INTEGER REFERENCES merchants(id),
is_active BOOLEAN NOT NULL DEFAULT TRUE,
created_at TIMESTAMPTZ NOT NULL DEFAULT NOW(),
updated_at TIMESTAMPTZ NOT NULL DEFAULT NOW()
);
CREATE INDEX idx_products_category ON products (part_category_id);
CREATE INDEX idx_products_brand ON products (brand_id);
CREATE INDEX idx_products_active ON products (is_active);
CREATE INDEX idx_products_lowest_price ON products (current_lowest_price);
-- Optional: a "natural-ish" uniqueness constraint if you want it
-- (Can be relaxed later if needed)
CREATE UNIQUE INDEX uniq_products_brand_name_cat
ON products (brand_id, name, part_category_id);
-- ============================================
-- 5. product_offers
-- Merchant-specific offers for a product
-- ============================================
CREATE TABLE product_offers (
id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
product_id UUID NOT NULL REFERENCES products(id) ON DELETE CASCADE,
merchant_id INTEGER NOT NULL REFERENCES merchants(id),
avantlink_product_id TEXT NOT NULL,
sku TEXT,
upc TEXT,
buy_url TEXT NOT NULL,
price NUMERIC(10,2) NOT NULL,
original_price NUMERIC(10,2),
currency TEXT NOT NULL DEFAULT 'USD',
in_stock BOOLEAN NOT NULL DEFAULT TRUE,
last_seen_at TIMESTAMPTZ NOT NULL DEFAULT NOW(),
first_seen_at TIMESTAMPTZ NOT NULL DEFAULT NOW()
);
-- Each merchant + avantlink_product_id combination must be unique
CREATE UNIQUE INDEX uniq_product_offers_merchant_product
ON product_offers (merchant_id, avantlink_product_id);
CREATE INDEX idx_product_offers_product ON product_offers (product_id);
CREATE INDEX idx_product_offers_merchant ON product_offers (merchant_id);
CREATE INDEX idx_product_offers_in_stock ON product_offers (in_stock);
CREATE INDEX idx_product_offers_price ON product_offers (price);
-- ============================================
-- 6. price_history
-- For tracking price changes over time
-- ============================================
CREATE TABLE price_history (
id BIGSERIAL PRIMARY KEY,
product_offer_id UUID NOT NULL REFERENCES product_offers(id) ON DELETE CASCADE,
price NUMERIC(10,2) NOT NULL,
recorded_at TIMESTAMPTZ NOT NULL DEFAULT NOW()
);
CREATE INDEX idx_price_history_offer ON price_history (product_offer_id);
CREATE INDEX idx_price_history_recorded_at ON price_history (recorded_at);
-- ============================================
-- 7. category_mappings
-- Map raw AvantLink categories to internal part_categories
-- ============================================
CREATE TABLE category_mappings (
id SERIAL PRIMARY KEY,
merchant_id INTEGER NOT NULL REFERENCES merchants(id),
raw_category_path TEXT NOT NULL, -- e.g. 'Firearms > AR-15 Parts > Lower Receivers'
part_category_id INTEGER NOT NULL REFERENCES part_categories(id),
created_at TIMESTAMPTZ NOT NULL DEFAULT NOW(),
UNIQUE (merchant_id, raw_category_path)
);
CREATE INDEX idx_category_mappings_merchant ON category_mappings (merchant_id);
CREATE INDEX idx_category_mappings_part_category ON category_mappings (part_category_id);
-- ============================================
-- 8. feed_imports
-- Track each feed import run for observability
-- ============================================
CREATE TABLE feed_imports (
id BIGSERIAL PRIMARY KEY,
merchant_id INTEGER NOT NULL REFERENCES merchants(id),
started_at TIMESTAMPTZ NOT NULL DEFAULT NOW(),
finished_at TIMESTAMPTZ,
rows_total INTEGER,
rows_processed INTEGER,
rows_new INTEGER,
rows_updated INTEGER,
status TEXT NOT NULL DEFAULT 'running', -- 'running','success','error'
error_message TEXT
);
CREATE INDEX idx_feed_imports_merchant ON feed_imports (merchant_id);
CREATE INDEX idx_feed_imports_status ON feed_imports (status);
CREATE INDEX idx_feed_imports_started_at ON feed_imports (started_at);
-- ============================================
-- 9. Helpful seed data (optional)
-- ============================================
-- Part categories seed (adjust as needed)
INSERT INTO part_categories (slug, name) VALUES
('lower', 'Lower Receiver'),
('upper', 'Upper Receiver'),
('barrel', 'Barrel'),
('handguard', 'Handguard'),
('stock', 'Stock'),
('optic', 'Optic')
ON CONFLICT (slug) DO NOTHING;
-- Example merchant skeleton (fill real datafeed URL + AvantLink MID)
-- INSERT INTO merchants (name, avantlink_mid, feed_url)
-- VALUES ('Example Merchant', '12345', 'https://www.avantlink.com/api/...');