Index: components/BuildCard.tsx =================================================================== --- components/BuildCard.tsx (revision ae5d054380355a32555383768cf7c4a780c9028d) +++ components/BuildCard.tsx (revision 8a7f936ef2c6040183ae33f4b63947eecf8bf3b2) @@ -1,36 +1,79 @@ -import React from 'react'; -import { Card, CardMedia, CardContent, Typography, Box, Chip } from '@mui/material'; +import React, {useEffect, useState} from 'react'; +import {Card, CardContent, CardMedia, Typography, Box, Chip} from '@mui/material'; import StarIcon from '@mui/icons-material/Star'; -// import PersonIcon from '@mui/icons-material/Person'; +import {onGetBuildDetails} from "../pages/+Layout.telefunc"; -export default function BuildCard({ build, onClick }: { build: any, onClick: () => void }) { - const formattedPrice = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'EUR' }).format(build.total_price || 0); +export default function BuildCard({build, onClick}: { build: any, onClick?: () => void }) { + const [caseImage, setCaseImage] = useState("https://placehold.co/600x400?text=PC+Build"); + const [imageLoading, setImageLoading] = useState(true); + + const formattedPrice = new Intl.NumberFormat('en-US', { + style: 'currency', + currency: 'EUR' + }).format(build.total_price || 0); + + useEffect(() => { + onGetBuildDetails({buildId: build.id}) + .then(details => { + const caseComponent = details.components.find((c: any) => c.type === 'case'); + setCaseImage(caseComponent?.imgUrl || caseComponent?.imgUrl || "https://placehold.co/600x400?text=PC+Build"); + }) + .catch(() => { + }) + .finally(() => setImageLoading(false)); + }, [build.id]); return ( - - - - {build.name} - + + + - {/*Ne se renderira user-ot*/} - - {/* */} - {/* {build.user || 'Unknown'}*/} + + + + {build.name} + - - - - + + + + {Number(build.avgRating || 5).toFixed(1)} Index: components/BuildDetailsDialog.tsx =================================================================== --- components/BuildDetailsDialog.tsx (revision ae5d054380355a32555383768cf7c4a780c9028d) +++ components/BuildDetailsDialog.tsx (revision 8a7f936ef2c6040183ae33f4b63947eecf8bf3b2) @@ -1,6 +1,6 @@ import React, { useEffect, useState } from 'react'; import { - Dialog, DialogTitle, DialogContent, Button, Grid, Box, Typography, - IconButton, Tab, Tabs, Table, TableBody, TableCell, TableRow, Rating, TextField, Avatar, Chip + Dialog, DialogTitle, DialogContent, DialogActions, Button, Grid, Box, Typography, + IconButton, Tab, Tabs, Table, TableBody, TableCell, TableRow, Rating, TextField, Avatar, Chip, Alert } from '@mui/material'; import CloseIcon from '@mui/icons-material/Close'; @@ -9,12 +9,14 @@ import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder'; import PersonIcon from "@mui/icons-material/Person"; -import { onGetBuildDetails, onSetReview, onToggleFavorite } from '../pages/+Layout.telefunc'; +import {onGetBuildDetails, onSetReview, onToggleFavorite, onCloneBuild, onSetRating} from '../pages/+Layout.telefunc'; const formatPrice = (price: any) => new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(Number(price) || 0); -export default function BuildDetailsDialog({ open, buildId, onClose, onClone, currentUser }: any) { +export default function BuildDetailsDialog({ open, buildId, onClose, currentUser }: any) { const [details, setDetails] = useState(null); const [loading, setLoading] = useState(false); const [tabIndex, setTabIndex] = useState(0); + const [cloneDialogOpen, setCloneDialogOpen] = useState(false); + const [cloningBuildId, setCloningBuildId] = useState(null); const [reviewText, setReviewText] = useState(""); @@ -45,7 +47,15 @@ const handleSubmitReview = async () => { if (!currentUser) return alert("Please login to review."); - await onSetReview({ buildId, content: reviewText }); - - setReviewText(""); + + await onSetReview({ + buildId, + content: reviewText, + // rating: ratingVal + }); + + await onSetRating({ + buildId, + value: ratingVal + }) const refreshed = await onGetBuildDetails({ buildId }); @@ -53,158 +63,204 @@ }; + const handleCloneConfirm = async () => { + if (!cloningBuildId) return; + + try { + const newBuildId = await onCloneBuild({ buildId: cloningBuildId }); + + window.location.href = `/forge?buildId=${newBuildId}`; + + setCloneDialogOpen(false); + setCloningBuildId(null); + } catch (e) { + alert("Failed to clone build. Please try again."); + } + }; + + if (!open) return null; - // @ts-ignore return ( - - {loading || !details ? ( - Loading Forge Schematics... - ) : ( - <> - - - {details.name} - - - - by {details.creator} - - + <> + + {loading || !details ? ( + Loading Forge Schematics... + ) : ( + <> + + + {details.name} + + + + by {details.creator} + + + - - - - - - - setTabIndex(v)}> - - - - - - - {tabIndex === 0 && ( - - - - - {details.components.map((comp: any) => ( - - - - {comp.type?.substring(0, 3)?.toUpperCase()} - - - - - {comp.type} - - - {comp.brand} {comp.name} - - - - {formatPrice(comp.price)} + + + + + + setTabIndex(v)}> + + + + + + + {tabIndex === 0 && ( + + +
+ + {details.components.map((comp: any) => ( + + + + {comp.type?.substring(0, 3)?.toUpperCase()} + + + + + {comp.type} + + + {comp.brand} {comp.name} + + + + {formatPrice(comp.price)} + + + ))} + + TOTAL + + {formatPrice(details.totalPrice)} - ))} - - TOTAL - - {formatPrice(details.totalPrice)} - - - -
+ + + + + + + Builder's Notes + + "{details.description || "No notes provided."}" + + + + + + + + - - - - Builder's Notes - - "{details.description || "No notes provided."}" - + )} + + {tabIndex === 1 && ( + + + {details.ratingStatistics.averageRating.toFixed(1)} + + + {details.ratingStatistics.ratingCount} ratings + - - - - - - - )} - - {tabIndex === 1 && ( - - - {details.ratingStatistics.averageRating.toFixed(1)} - - - {details.ratingStatistics.ratingCount} ratings + {currentUser && details.userId !== currentUser.id && ( + + Your Review + + setRatingVal(v || 5)} /> + + setReviewText(e.target.value)} + sx={{ mb: 1 }} + /> + + + )} + + {currentUser && details.userId === currentUser.id && ( + + You cannot rate your own builds. + + )} + + + {details.reviews.map((rev: any, i: number) => ( + + + {rev.username} + {rev.createdAt} + + {rev.content} + + ))} + {details.reviews.length === 0 && ( + No reviews yet. Be the first! + )} - - {currentUser && ( - - Your Review - - setRatingVal(v || 5)} /> - - setReviewText(e.target.value)} - sx={{ mb: 1 }} - /> - - - )} - - - {details.reviews.map((rev: any, i: number) => ( - - - {rev.username} - {rev.createdAt} - - {rev.content} - - ))} - {details.reviews.length === 0 && ( - No reviews yet. Be the first! - )} - - - )} - - - - )} - + )} + + + + )} + + + setCloneDialogOpen(false)}> + Clone Build + + + This will create a copy of "{details?.name}" in your Forge so you can edit it. + All components will be copied over. + + + + + + + + ); } Index: components/ComponentDetailsDialog.tsx =================================================================== --- components/ComponentDetailsDialog.tsx (revision ae5d054380355a32555383768cf7c4a780c9028d) +++ components/ComponentDetailsDialog.tsx (revision 8a7f936ef2c6040183ae33f4b63947eecf8bf3b2) @@ -33,7 +33,23 @@ const renderValue = (key: string, val: any) => { if (Array.isArray(val)) { - if (val.length > 0 && typeof val[0] === 'object') { - return val.map((v: any) => v.formFactor || v.socket || JSON.stringify(v)).join(', '); + if (val.length === 0) return 'None'; + + if (typeof val[0] === 'string') { + return val.join(', '); } + + if (typeof val[0] === 'object') { + const parts = val + .map((v: any) => + v.socket || + v.formFactor || + v.name || + v.type || + Object.values(v)[0] + ) + .filter(Boolean); + return parts.length > 0 ? parts.join(', ') : 'None'; + } + return val.join(', '); } @@ -42,5 +58,4 @@ const lowerKey = key.toLowerCase(); - // Dodava merni edinici vo zavisnost koja komponenta e if (lowerKey.includes('capacity') || lowerKey.includes('vram') || lowerKey === 'memory') { return `${strVal} GB`; @@ -58,4 +73,5 @@ return `${strVal} GHz`; } + if (lowerKey.includes('speed')) { return `${strVal} MHz`; Index: components/ComponentDialog.tsx =================================================================== --- components/ComponentDialog.tsx (revision ae5d054380355a32555383768cf7c4a780c9028d) +++ components/ComponentDialog.tsx (revision 8a7f936ef2c6040183ae33f4b63947eecf8bf3b2) @@ -1,27 +1,57 @@ import React, {useEffect, useState} from 'react'; import { - Dialog, DialogContent, IconButton, Grid, Box, Typography, + Dialog, DialogContent, IconButton, Box, Typography, Chip, Slider, FormControl, InputLabel, Select, MenuItem, Checkbox, ListItemText, - Card, CardContent, CardMedia, Button, CircularProgress, Divider, AppBar, Toolbar + Card, CardContent, CardMedia, Button, CircularProgress, AppBar, Toolbar, InputAdornment, TextField, + TextField as MuiTextField, DialogTitle, DialogActions, Snackbar, Alert } from '@mui/material'; import CloseIcon from '@mui/icons-material/Close'; -import FilterListIcon from '@mui/icons-material/FilterList'; -import SortIcon from '@mui/icons-material/Sort'; - -import {onGetAllComponents} from '../pages/+Layout.telefunc'; +import AddCircleIcon from '@mui/icons-material/AddCircle'; + +import {onGetAllComponents, onGetAuthState, onSuggestComponent} from '../pages/+Layout.telefunc' +import {onGetCompatibleComponents} from '../pages/forge/forge.telefunc'; import ComponentDetailsDialog from "./ComponentDetailsDialog"; - -const formatMoney = (amount: number) => `$${amount}`; - -export default function ComponentBrowserDialog({open, category, onClose}: any) { +import SearchIcon from "@mui/icons-material/Search"; + +const formatMoney = (amount: number) => `$${Number(amount).toFixed(2)}`; + +export default function ComponentDialog({open, category, onClose, mode, onSelect, currentBuildId}: any) { const [components, setComponents] = useState([]); const [loading, setLoading] = useState(false); - const [selectedComponent, setSelectedComponent] = useState(null); const [priceRange, setPriceRange] = useState([0, 2000]); const [selectedBrands, setSelectedBrands] = useState([]); const [availableBrands, setAvailableBrands] = useState([]); - const [sortOrder, setSortOrder] = useState('default'); + + const [tempSearchQuery, setTempSearchQuery] = useState(""); + const [searchQuery, setSearchQuery] = useState(""); + + const [suggestOpen, setSuggestOpen] = useState(false); + const [suggestForm, setSuggestForm] = useState({ + link: '', + description: '', + componentType: category || '' + }); + const [suggestLoading, setSuggestLoading] = useState(false); + const [snackbarOpen, setSnackbarOpen] = useState(false); + const [snackbarMessage, setSnackbarMessage] = useState(""); + const [userId, setUserId] = useState(null); + + useEffect(() => { + const timeoutId = setTimeout(() => { + setSearchQuery(tempSearchQuery); + }, 300); + return () => clearTimeout(timeoutId); + }, [tempSearchQuery]); + + // Load user auth + useEffect(() => { + if (open) { + onGetAuthState().then(userData => { + setUserId(userData.userId); + }); + } + }, [open]); useEffect(() => { @@ -30,23 +60,85 @@ setSortOrder('price_desc'); - onGetAllComponents({componentType: category}) + const shouldUseCompatibility = mode === 'forge' && currentBuildId; + const fetcher = shouldUseCompatibility + ? onGetCompatibleComponents({ + buildId: currentBuildId, + componentType: category, + limit: 100, + sort: 'price_desc' + }) + : onGetAllComponents({ + componentType: category, + limit: 100, + sort: 'price_desc' + }); + + fetcher .then((data) => { - setComponents(data); - - const brands = Array.from(new Set(data.map((c: any) => c.brand))); + const comps = data || []; + setComponents(comps); + + const brands = Array.from(new Set(comps.map((c: any) => c.brand))); setAvailableBrands(brands as string[]); - - const maxPrice = data.length > 0 ? Math.max(...data.map((c: any) => Number(c.price))) : 2000; + const maxPrice = comps.length > 0 ? Math.max(...comps.map((c: any) => Number(c.price))) : 2000; setPriceRange([0, Math.ceil(maxPrice)]); }) - .catch(console.error) + .catch((err) => { + console.error('[Dialog] fetch error:', err); + setComponents([]); + }) .finally(() => setLoading(false)); } - }, [open, category]); + }, [open, category, mode, currentBuildId]); + + const handleSuggestChange = (e: React.ChangeEvent) => { + setSuggestForm({ + ...suggestForm, + [e.target.name]: e.target.value + }); + }; + + const submitSuggestion = async () => { + if (!userId) { + setSnackbarMessage("Please login to submit suggestions!"); + setSnackbarOpen(true); + return; + } + + if (!suggestForm.link || !suggestForm.description) { + setSnackbarMessage("Please fill in all fields!"); + setSnackbarOpen(true); + return; + } + + setSuggestLoading(true); + try { + const suggestionId = await onSuggestComponent({ + link: suggestForm.link, + description: suggestForm.description, + componentType: suggestForm.componentType + }); + + setSnackbarMessage("Suggestion submitted! Admin will review it."); + setSnackbarOpen(true); + setSuggestOpen(false); + setSuggestForm({link: '', description: '', componentType: category || ''}); + } catch (error) { + console.error('Suggestion error:', error); + setSnackbarMessage("Failed to submit suggestion. Try again."); + setSnackbarOpen(true); + } finally { + setSuggestLoading(false); + } + }; let processedComponents = components.filter(comp => { const matchesBrand = selectedBrands.length === 0 || selectedBrands.includes(comp.brand); const matchesPrice = Number(comp.price) >= priceRange[0] && Number(comp.price) <= priceRange[1]; - return matchesBrand && matchesPrice; + const matchesSearch = searchQuery === "" || + comp.name.toLowerCase().includes(searchQuery.toLowerCase()) || + comp.brand.toLowerCase().includes(searchQuery.toLowerCase()); + + return matchesBrand && matchesPrice && matchesSearch; }); @@ -65,169 +157,280 @@ return ( - - - - - Browsing: {category === 'gpu' ? 'Graphics Cards' : category?.toUpperCase()} - - - - - - - - - - - - Sort By + <> + + + + + Browsing: {category === 'gpu' ? 'Graphics Cards' : category?.toUpperCase()} + {mode === 'forge' && currentBuildId && ( + + COMPATIBILITY MODE ON + + )} + + + + + + + + + + setTempSearchQuery(e.target.value)} + sx={{mb: 2}} + InputProps={{ + startAdornment: , + }} + /> + + + + Sort By + + + + + Brands + + + + Price Range + setPriceRange(v as number[])} min={0} max={2000} + sx={{color: '#ff8201'}}/> + + ${priceRange[0]} + ${priceRange[1]}+ + + {/*TO BE FINISHED*/} + - - Price - - - - - - - - Filters - - - Price Range - setPriceRange(newValue as number[])} - valueLabelDisplay="auto" - min={0} - max={components.length > 0 ? Math.max(...components.map(c => Number(c.price))) : 2000} - sx={{color: '#ff8201', mb: 2}} - /> - - {formatMoney(priceRange[0])} - {formatMoney(priceRange[1])} - - - - Brands - - - - - - {loading ? ( - - - - ) : ( - - {processedComponents.map((comp) => ( - - - - - - {comp.brand} - - + {loading ? ( + + + + ) : ( + + {processedComponents.map((comp) => ( + + + + + + + - {comp.name} - - - - + + + {comp.brand} + + + {comp.name} + + + {formatMoney(comp.price)} + + + + + {mode === 'forge' && onSelect && ( + + )} - - - - - - - ))} - {processedComponents.length === 0 && ( - - No components match. - - )} - - )} - - - setSelectedComponent(null)} - /> - + + + ))} + {processedComponents.length === 0 && ( + + + No compatible components found. + + {mode === 'forge' && ( + + (Try removing incompatible parts) + + )} + + )} + + )} + + + + setSelectedComponent(null)} + /> + + + setSuggestOpen(false)} maxWidth="sm" fullWidth> + Suggest a New Component + + + + + Category: {category?.toUpperCase()} + + + + + + + + + setSnackbarOpen(false)} + anchorOrigin={{vertical: 'bottom', horizontal: 'right'}} + > + setSnackbarOpen(false)} sx={{width: '100%'}}> + {snackbarMessage} + + + ); } Index: database/drizzle/queries/components.ts =================================================================== --- database/drizzle/queries/components.ts (revision ae5d054380355a32555383768cf7c4a780c9028d) +++ database/drizzle/queries/components.ts (revision 8a7f936ef2c6040183ae33f4b63947eecf8bf3b2) @@ -247,4 +247,6 @@ if(!existingComponents) return null; + + const existing = { cpu: existingComponents.find(c => c.type === 'cpu'), Index: pages/dashboard/admin/+Page.tsx =================================================================== --- pages/dashboard/admin/+Page.tsx (revision ae5d054380355a32555383768cf7c4a780c9028d) +++ pages/dashboard/admin/+Page.tsx (revision 8a7f936ef2c6040183ae33f4b63947eecf8bf3b2) @@ -49,5 +49,5 @@ const openSuggestionReview = (id: number, action: 'approved' | 'rejected') => { setSuggestionDialog({ open: true, id, action }); - setAdminComment(action === 'approved' ? "Approved by admin." : "Rejected: "); + setAdminComment(action === 'approved' ? "" : ""); }; @@ -123,5 +123,5 @@ - {sug.componentType} + {sug.componentType.toUpperCase()} {sug.userId} @@ -207,5 +207,5 @@ setSuggestionDialog({...suggestionDialog, open: false})}> - Review Suggestion + Review Component Suggestion Status: {suggestionDialog.action.toUpperCase()} Index: pages/forge/+Page.tsx =================================================================== --- pages/forge/+Page.tsx (revision ae5d054380355a32555383768cf7c4a780c9028d) +++ pages/forge/+Page.tsx (revision 8a7f936ef2c6040183ae33f4b63947eecf8bf3b2) @@ -1,5 +1,471 @@ -export default function ForgePage(){ +import React, {useState, useEffect, useMemo} from 'react'; +import { + Container, Paper, Typography, Box, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, + Button, IconButton, Avatar, TextField, Grid, Chip, CircularProgress, + Menu, MenuItem, ListItemIcon +} from '@mui/material'; +import AddIcon from '@mui/icons-material/Add'; +import DeleteIcon from '@mui/icons-material/Delete'; +import CloseIcon from "@mui/icons-material/Close"; +import AlbumIcon from "@mui/icons-material/Album"; +import CableIcon from "@mui/icons-material/Cable"; +import RouterIcon from "@mui/icons-material/Router"; +import MemoryIcon from "@mui/icons-material/Memory"; + +import { + saveBuildState, + onAddComponentToBuild, + onRemoveComponentFromBuild, + onDeleteBuild, + onGetBuildState, onGetBuildComponents +} from './forge.telefunc'; + +import ComponentDialog from '../../components/ComponentDialog'; +import ComponentDetailsDialog from '../../components/ComponentDetailsDialog'; +import {onAddNewBuild, onGetComponentDetails} from "../+Layout.telefunc"; +import {onEditBuild} from "../dashboard/user/userDashboard.telefunc"; + +type BuildSlot = { + id: string; + type: string; + label: string; + component: any | null; + required: boolean; +}; + +const INITIAL_SLOTS: BuildSlot[] = [ + {id: 'cpu', type: 'cpu', label: 'CPU', component: null, required: true}, + {id: 'cooler', type: 'cooler', label: 'CPU Cooler', component: null, required: true}, + {id: 'motherboard', type: 'motherboard', label: 'Motherboard', component: null, required: true}, + {id: 'memory_1', type: 'memory', label: 'Memory', component: null, required: true}, + {id: 'gpu', type: 'gpu', label: 'Video Card', component: null, required: true}, + {id: 'storage_1', type: 'storage', label: 'Storage', component: null, required: true}, + {id: 'powersupply', type: 'power_supply', label: 'Power Supply', component: null, required: true}, + {id: 'case', type: 'case', label: 'Case', component: null, required: true}, +]; + +export default function ForgePage() { + const [slots, setSlots] = useState(INITIAL_SLOTS); + const [buildId, setBuildId] = useState(null); + const [buildName, setBuildName] = useState(""); + const [description, setDescription] = useState(""); + const [totalPrice, setTotalPrice] = useState(0); + const [isSubmitting, setIsSubmitting] = useState(false); + + const [browserOpen, setBrowserOpen] = useState(false); + const [activeSlotId, setActiveSlotId] = useState(null); + const [detailsOpen, setDetailsOpen] = useState(null); + const [anchorEl, setAnchorEl] = useState(null); + const isSubmittedRef = React.useRef(false); + + useEffect(() => { + const price = slots.reduce((sum, slot) => sum + (Number(slot.component?.price) || 0), 0); + setTotalPrice(price); + }, [slots]); + + useEffect(() => { + if (!buildId) return; + + const handleBeforeUnload = () => { + if (!isSubmittedRef.current) { + onDeleteBuild({buildId}).catch(() => { + }); + } + }; + + window.addEventListener('beforeunload', handleBeforeUnload); + + return () => { + window.removeEventListener('beforeunload', handleBeforeUnload); + if (!isSubmittedRef.current) { + onDeleteBuild({buildId}).catch(() => { + }); + } + }; + }, [buildId]); + + useEffect(() => { + const urlParams = new URLSearchParams(window.location.search); + const urlBuildId = urlParams.get('buildId'); + + if (urlBuildId && Number.isInteger(Number(urlBuildId)) && Number(urlBuildId) > 0) { + const loadBuildId = Number(urlBuildId); + onGetBuildComponents({ buildId: loadBuildId }) + .then(async (components) => { + if (components && components.length > 0) { + setBuildId(loadBuildId); + setBuildName("Cloned Build"); + setDescription(""); + + const detailedComponents = await Promise.all( + components.map(async (c: any) => { + const full = await onGetComponentDetails({ componentId: c.id }).catch(() => null); + return full ? { ...c, ...full, details: full?.details } : c; + }) + ); + + const componentMap = new Map(); + detailedComponents.forEach((c: any) => componentMap.set(c.type, c)); + + setSlots(prevSlots => prevSlots.map(slot => { + const match = componentMap.get(slot.type); + return match ? { ...slot, component: match } : slot; + })); + + window.history.replaceState({}, document.title, "/forge"); + } + }) + .catch(() => {}); + } + }, []); + + const handlePickPart = (slotId: string) => { + setActiveSlotId(slotId); + setTimeout(() => setBrowserOpen(true), 0); + }; + + const handleSelectComponent = async (component: any) => { + if (!activeSlotId) return; + + try { + let id = buildId; + if (!id) { + const result = await onAddNewBuild({name: "Draft Build", description: "Work in progress"}); + id = typeof result === 'number' ? result : (result as any)?.buildId; + if (!id || !Number.isInteger(id) || id <= 0) { + alert("Failed to create draft build."); + return; + } + setBuildId(id); + } + + const full = await onGetComponentDetails({componentId: component.id}).catch(() => null); + const merged = full ? {...component, ...full, details: full.details} : component; + + setSlots(prev => prev.map(slot => + slot.id === activeSlotId ? {...slot, component: merged} : slot + )); + setBrowserOpen(false); + + await onAddComponentToBuild({buildId: id, componentId: component.id}); + } catch (e) { + // console.error("Failed to add component to server build", e); + alert("Failed to add component. Please try again."); + } finally { + setActiveSlotId(null); + } + }; + + const handleRemovePart = async (slotId: string) => { + const slot = slots.find(s => s.id === slotId); + if (!slot?.component || !buildId) return; + + setSlots(prev => prev.map(s => + s.id === slotId ? {...s, component: null} : s + )); + + try { + await onRemoveComponentFromBuild({ + buildId, + componentId: slot.component.id + }); + } catch (e) { + console.error("Failed to remove component from server", e); + } + }; + + const handleAddSlot = (type: string, label: string) => { + const count = slots.filter(s => s.type === type).length; + const newSlot: BuildSlot = { + id: `${type}_${count + 1}`, + type, + label: `${label} ${count > 0 ? count + 1 : ''}`, + component: null, + required: false + }; + setSlots(prev => [...prev, newSlot]); + setAnchorEl(null); + }; + + const handleDeleteSlot = (slotId: string) => { + const slot = slots.find(s => s.id === slotId); + if (slot?.component) { + handleRemovePart(slotId); + } + setSlots(prev => prev.filter(s => s.id !== slotId)); + }; + + const handleSubmit = async () => { + if (!buildName.trim()) return alert("Please name your build!"); + if (!buildId) return alert("You must add at least one component before submitting."); + + setIsSubmitting(true); + try { + const result = await onEditBuild({buildId}); + + if (!result) throw new Error("Failed to save build"); + + isSubmittedRef.current = true; + window.location.href = "/dashboard/user"; + } catch (e) { + console.error(e); + alert("Failed to save build."); + } finally { + setIsSubmitting(false); + } + }; + + + const activeSlotType = useMemo(() => { + if (!activeSlotId) return null; + return slots.find(s => s.id === activeSlotId)?.type || null; + }, [slots, activeSlotId]); + return ( -

Test Forge Page

- ) + + + Forge Your Machine + + + setBuildName(e.target.value)} + sx={{bgcolor: '#1e1e1e', borderRadius: 1, color: 'white'}} + /> + + + + + + + + + Component + Selection & Specs + Price + Actions + + + + {slots.map((slot) => ( + + + {slot.label} + {slot.required && + } + + + + {slot.component ? ( + + + {slot.component.brand?.[0]} + + + setDetailsOpen(slot.component)} + > + {slot.component.name} + + + {renderSpecs(slot.component, slot.type)} + + + + ) : ( + + )} + + + + {slot.component ? `$${Number(slot.component.price).toFixed(2)}` : '-'} + + + + {slot.component && ( + handleRemovePart(slot.id)}> + + + )} + {!slot.required && ( + handleDeleteSlot(slot.id)}> + + + )} + + + ))} + +
+ + + + + setAnchorEl(null)}> + + Memory & Storage + + handleAddSlot('memory', 'Memory')}> + + Additional Memory + + handleAddSlot('storage', 'Storage')}> + + Additional Storage + + + + Accessories + + handleAddSlot('optical_drive', 'Optical Drive')}> + + Optical Drive + + handleAddSlot('cables', 'Cable')}> + + Cables + + + + Expansion Cards + + handleAddSlot('memory_card', 'Storage Card')}> + + Storage Card + + handleAddSlot('sound_card', 'Sound Card')}> + + Sound Card + + handleAddSlot('network_card', 'Network Card')}> + + Network Card + + handleAddSlot('network_adapter', 'WiFi Adapter')}> + + WiFi Adapter + + + + + + + Total: ${totalPrice.toFixed(2)} + + + + + { + setBrowserOpen(false); + setActiveSlotId(null); + }} + mode="forge" + onSelect={handleSelectComponent} + currentBuildId={buildId} + /> + + setDetailsOpen(null)} + /> + + ); } + +function renderSpecs(c: any, type: string) { + if (!c) return null; + const data = {...c, ...(c.details || {})}; + const chipStyle = {height: 24, fontSize: '0.75rem', bgcolor: 'rgba(0,0,0,0.05)'}; + const specs: string[] = []; + const val = (k: string) => data[k] || data[k.toLowerCase()] || data[k.replace('_', '')]; + + switch (type) { + case 'cpu': + if (val('socket')) specs.push(val('socket')); + if (val('cores')) specs.push(`${val('cores')} Cores / ${val('threads')} Threads`); + const base = data.baseclock || data.baseClock || data.base_clock; + const boost = data.boostclock || data.boostClock || data.boost_clock; + if (base) specs.push(`Base: ${base}GHz`); + if (boost) specs.push(`Boost: ${boost}GHz`); + break; + case 'gpu': + if (val('vram')) specs.push(`${val('vram')}GB VRAM`); + if (val('chipset')) specs.push(val('chipset')); + if (val('length')) specs.push(`L: ${val('length')}mm`); + break; + case 'motherboard': + if (val('socket')) specs.push(val('socket')); + if (val('formfactor')) specs.push(val('formfactor')); + if (val('ramtype')) specs.push(val('ramtype')); + break; + case 'memory': + if (val('capacity')) specs.push(`${val('capacity')}GB`); + if (val('type')) specs.push(val('type')); + if (val('speed')) specs.push(`${val('speed')} MHz`); + if (val('modules')) specs.push(`${val('modules')}x`); + break; + case 'storage': + if (val('capacity')) specs.push(`${val('capacity')}GB`); + if (val('type')) specs.push(val('type')); + break; + case 'power_supply': + if (val('wattage')) specs.push(`Wattage: ${val('wattage')}W`); + if (val('type')) specs.push(val('type')); + break; + case 'case': + if (val('gpuMaxLength')) specs.push(`Max GPU Length: ${val('gpuMaxLength')}mm`); + if (val('coolerMaxHeight')) specs.push(`Max CPU Cooler Height: ${val('coolerMaxHeight')}mm`); + break; + case 'cooler': + if (val('type')) specs.push(`${val('type')} Cooler`); + if (val('height')) specs.push(`${val('height')}mm`); + break; + default: + if (data.brand) specs.push(data.brand); + } + + if (specs.length === 0) { + if (data.brand) return ; + return ...; + } + + return specs.map((label, i) => ); +} Index: pages/index/+Page.tsx =================================================================== --- pages/index/+Page.tsx (revision ae5d054380355a32555383768cf7c4a780c9028d) +++ pages/index/+Page.tsx (revision 8a7f936ef2c6040183ae33f4b63947eecf8bf3b2) @@ -1,3 +1,3 @@ -import React, { useEffect, useState } from 'react'; +import React, {useEffect, useState} from 'react'; import { Container, Box, Typography, Button, Grid, IconButton, Dialog, DialogTitle, DialogContent @@ -10,5 +10,5 @@ import BuildCard from '../../components/BuildCard'; -import { onGetApprovedBuilds, onGetAuthState, onCloneBuild } from '../+Layout.telefunc'; +import {onGetApprovedBuilds, onGetAuthState, onCloneBuild} from '../+Layout.telefunc'; export default function HomePage() { @@ -29,7 +29,7 @@ ] = await Promise.all([ onGetAuthState(), - onGetApprovedBuilds({ limit: 5 , sort: 'rating_desc' }), - onGetApprovedBuilds({ limit: 12 }), - onGetApprovedBuilds({ limit: 10, sort: 'rating_desc' }) + onGetApprovedBuilds({limit: 5, sort: 'rating_desc'}), + onGetApprovedBuilds({limit: 12}), + onGetApprovedBuilds({limit: 20, sort: 'rating_desc'}) ]); @@ -45,4 +45,5 @@ } } + loadSite(); }, []); @@ -51,5 +52,5 @@ if (!data?.isLoggedIn) return alert("Please login to clone builds!"); if (confirm(`Clone this build to your dashboard?`)) { - await onCloneBuild({ buildId }); + await onCloneBuild({buildId}); alert("Build cloned! Check your dashboard."); setSelectedBuildId(null); @@ -57,5 +58,5 @@ }; - if (!data) return Loading Forge...; + if (!data) return Loading Forge...; return ( @@ -69,11 +70,11 @@ } }}> - + Forge Your Ultimate Machine - + Build, share, discuss, and discover custom PC configurations. - @@ -81,7 +82,7 @@ - + @@ -92,35 +93,62 @@ - - - - {data.prebuilts.slice(0, 3).map((build: any) => ( - - - setSelectedBuildId(build.id)} - /> - - + + {data.prebuilts.map((build: any) => ( + setSelectedBuildId(build.id)} + /> ))} - - - - + + + + Community Forge + Fresh builds from users around + the world. + + {data.communityBuilds.map((build: any) => ( - - setSelectedBuildId(build.id)} - /> - + setSelectedBuildId(build.id)} + /> ))} - - - + + + @@ -135,19 +163,28 @@ /> - setOpenRankedPopup(false)} maxWidth="lg" fullWidth scroll="paper"> - + setOpenRankedPopup(false)} maxWidth="xl" fullWidth + scroll="paper"> + Hall of Fame (Top Rated) - setOpenRankedPopup(false)}> + setOpenRankedPopup(false)}> - + {allRanked.map((build: any, index: number) => ( - - + + #{index + 1} @@ -166,15 +203,5 @@ - ); } - -function SectionHeader({ title, subtitle }: { title: string, subtitle: string }) { - return ( - - {title} - {subtitle} - - ); -}