[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_23":24,"_25":26,"_27":21,"_28":21,"_29":21,"_30":21,"_31":21,"_32":21,"_33":34},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":-7,"_12":13,"_14":15,"_16":17,"_18":19,"_20":21,"_22":21},"sharedTextdocId","691ab9cf057c81918ee63dcabc925ef7","versionInt","title","Capture Dashboard Mockup V2","type","code/react","content","import React, { useState, ChangeEvent } from \"react\";\n\nexport default function CaptureDashboardMockupV2() {\n const [tab, setTab] = useState(\"dashboard\");\n const [showUploader, setShowUploader] = useState(false);\n\n return (\n

\n {/* Sidebar */}\n \n\n {/* Main Content */}\n

\n {tab === \"dashboard\" && }\n {tab === \"assets\" && }\n {tab === \"showcase\" && }\n {tab === \"help\" && }\n

\n\n {showUploader && setShowUploader(false)} />}\n

\n );\n}\n\n/* ---------------- Dashboard ---------------- */\nfunction DashboardSection() {\n return (\n

Recently Uploaded

\n {Array.from({ length: 12 }).map((_, i) => (\n

\n ))}\n

\n\n

Folders

\n {[\"Verified\", \"Collected\", \"On Sale\"].map((f) => (\n \n {f}\n

\n ))}\n

\n \n );\n}\n\n/* ---------------- Assets Section ---------------- */\nfunction AssetsSection() {\n return (\n

My Assets

List view / filter / batch edit coming soon.

\n );\n}\n\nfunction ShowcaseSection() {\n return

Showcase section preview.

;\n}\n\nfunction HelpSection() {\n return

Help & FAQ preview.

;\n}\n\n/* ---------------- Uploader V2 (IG + Batch) ---------------- */\ninterface UploaderV2Props {\n onClose: () => void;\n}\n\ninterface PhotoMeta {\n id: number;\n selected: boolean;\n title: string;\n caption: string;\n tags: string;\n license: string;\n priceTier: string;\n}\n\nfunction UploaderV2({ onClose }: UploaderV2Props) {\n const [step, setStep] = useState(1);\n\n const [photos, setPhotos] = useState(() =>\n Array.from({ length: 20 }).map((_, i) => ({\n id: i,\n selected: false,\n title: \"\",\n caption: \"\",\n tags: \"\",\n license: \"Standard Commercial\",\n priceTier: \"Standard (web + print)\",\n }))\n );\n\n const selectedPhotos = photos.filter((p) => p.selected);\n const selectedCount = selectedPhotos.length;\n\n const totalSelected = selectedCount;\n const uniqueLicenseCount = new Set(selectedPhotos.map((p) => p.license)).size;\n const priceTierCounts = selectedPhotos.reduce>((acc, p) => {\n const key = p.priceTier;\n acc[key] = (acc[key] ?? 0) + 1;\n return acc;\n }, {});\n const editorialOnlyCount = selectedPhotos.filter((p) => p.license === \"Editorial Only\").length;\n\n const toggleSelect = (id: number) => {\n setPhotos((prev) =>\n prev.map((p) => (p.id === id ? { ...p, selected: !p.selected } : p))\n );\n };\n\n const handleMetaChange = (\n id: number,\n field: \"title\" | \"caption\" | \"tags\",\n value: string\n ) => {\n setPhotos((prev) =>\n prev.map((p) => (p.id === id ? { ...p, [field]: value } : p))\n );\n };\n\n const handleLicenseChange = (id: number, value: string) => {\n setPhotos((prev) =>\n prev.map((p) => (p.id === id ? { ...p, license: value } : p))\n );\n };\n\n const handlePriceTierChange = (id: number, value: string) => {\n setPhotos((prev) =>\n prev.map((p) => (p.id === id ? { ...p, priceTier: value } : p))\n );\n };\n\n const applyFieldToAll = (field: \"title\" | \"caption\" | \"tags\") => {\n const source = selectedPhotos[0];\n if (!source) return;\n\n setPhotos((prev) =>\n prev.map((p) =>\n p.selected ? { ...p, [field]: (source as any)[field] } : p\n )\n );\n };\n\n const applyLicenseAndTierFromFirst = () => {\n const source = selectedPhotos[0];\n if (!source) return;\n\n setPhotos((prev) =>\n prev.map((p) =>\n p.selected\n ? { ...p, license: source.license, priceTier: source.priceTier }\n : p\n )\n );\n };\n\n const applyStandardBasicToAll = () => {\n setPhotos((prev) =>\n prev.map((p) =>\n p.selected\n ? {\n ...p,\n license: \"Standard Commercial\",\n priceTier: \"Basic (web, small print)\",\n }\n : p\n )\n );\n };\n\n const handleUpload = () => {\n // Placeholder: in real app this would call API\n const payload = selectedPhotos.length ? selectedPhotos : photos;\n console.log(\"Uploading photos:\", payload);\n onClose();\n };\n\n return (\n

Upload Photos

\n\n {/* Step Indicator */}\n

= 1 ? \"text-white\" : \"\"}>1. Select Source

= 2 ? \"text-white\" : \"\"}>2. Authorize / Import

= 3 ? \"text-white\" : \"\"}>3. Batch Select

= 4 ? \"text-white\" : \"\"}>4. Batch Edit Metadata

= 5 ? \"text-white\" : \"\"}>5. License & Register

\n\n {/* Step 1: Picker */}\n {step === 1 && (\n

Import From

\n {[\"Device\", \"Google Drive\", \"Dropbox\", \"Google Photos\", \"Instagram\"].map(\n (src) => (\n setStep(src === \"Instagram\" ? 2 : 3)}\n >\n {src}\n \n )\n )}\n

\n )}\n\n {/* Step 2: IG OAuth */}\n {step === 2 && (\n

Connect Instagram to continue

\n setStep(3)}\n >\n Login with Instagram\n \n

\n )}\n\n {/* Step 3: IG Media Grid / Batch Select */}\n {step === 3 && (\n

Select Photos

\n {photos.map((photo) => (\n toggleSelect(photo.id)}\n className={`aspect-square rounded-xl cursor-pointer border ${\n photo.selected\n ? \"bg-blue-600 border-blue-400\"\n : \"bg-zinc-800 border-zinc-700 hover:bg-zinc-700\"\n }`}\n >

\n ))}\n

\n {selectedCount} photo{selectedCount === 1 ? \"\" : \"s\"} selected\n

\n setStep(4)}\n disabled={selectedCount === 0}\n >\n Continue\n \n

\n )}\n\n {/* Step 4: Batch Editing */}\n {step === 4 && (\n

Review & Edit Metadata Per Photo

\n\n {selectedCount === 0 ? (\n

\n No photos selected. Go back and select at least one photo.\n

\n ) : (\n <>\n {/* Thumbnail + Metadata list */}\n

\n {selectedPhotos.map((photo) => (\n \n

\n ) =>\n handleMetaChange(photo.id, \"title\", e.target.value)\n }\n />\n ) =>\n handleMetaChange(photo.id, \"caption\", e.target.value)\n }\n />\n ) =>\n handleMetaChange(photo.id, \"tags\", e.target.value)\n }\n />\n

\n ))}\n

\n\n {/* Apply-to-all optional panel */}\n

\n Optional: Apply one value to all selected photos\n

\n applyFieldToAll(\"title\")}\n >\n Apply Title to All\n \n applyFieldToAll(\"caption\")}\n >\n Apply Caption to All\n \n applyFieldToAll(\"tags\")}\n >\n Apply Tags to All\n \n

\n\n setStep(5)}\n >\n Next\n \n \n )}\n

\n )}\n\n {/* Step 5: License & On-chain */}\n {step === 5 && (\n

Review & Set License & Price Per Photo

\n\n {selectedCount === 0 ? (\n

\n No photos selected. Go back and select at least one photo.\n

\n ) : (\n

\n {/* Left: per-photo settings */}\n

\n {/* Per-photo license + price tier list */}\n

\n {selectedPhotos.map((photo) => (\n \n

Photo {photo.id + 1}

\n\n {/* License select (Getty-style options) */}\n

License

\n ) =>\n handleLicenseChange(photo.id, e.target.value)\n }\n >\n \n \n \n \n \n

\n\n {/* Price tier select */}\n

Price tier

\n ) =>\n handlePriceTierChange(photo.id, e.target.value)\n }\n >\n \n \n \n \n

\n ))}\n

\n\n {/* Optional apply-to-all for license + price */}\n

\n Optional: Apply one setup to all selected photos\n

\n \n Use first photo's license & tier for all\n \n \n Set all to Standard + Basic tier\n \n

\n\n \n Upload & Register on Chain\n \n

\n\n {/* Right: summary panel */}\n

Summary

\n Selected photos\n {totalSelected}\n

\n Different licenses\n {uniqueLicenseCount}\n

\n\n

Price tiers

\n {Object.keys(priceTierCounts).length === 0 ? (\n

No tiers set yet.

\n ) : (\n

\n {Object.entries(priceTierCounts).map(([tier, count]) => (\n

\n \n {tier}\n \n {count}\n

\n ))}\n

\n )}\n

\n\n {/* Risk notice */}\n

Risk reminder

\n {editorialOnlyCount === 0 ? (\n

\n No Editorial Only images selected for this batch.\n

\n ) : (\n

\n {editorialOnlyCount} image\n {editorialOnlyCount === 1 ? \" is\" : \"s are\"} marked as\n Editorial Only.\n These cannot be used for commercial campaigns.\n

\n )}\n

\n )}\n \n )}\n\n \n Close\n \n \n \n );\n}\n","access","public","isModerationBlocked",false,"isAnonifyApiKeyDetected","dd",{"_35":36,"_37":38},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",34],"traceId","8425589491638967023","traceTime",1776435844144]