Index: components/AddComponentDialog.tsx =================================================================== --- components/AddComponentDialog.tsx (revision ff3a6146e85f77e90dc322a0ad0c9d9eb048c629) +++ (revision ) @@ -1,361 +1,0 @@ -import React, { useState, useEffect } from 'react'; -import { - Dialog, DialogTitle, DialogContent, DialogActions, Button, TextField, - Grid, Box, Typography, MenuItem, IconButton, Avatar, Alert -} 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 { onCreateNewComponent, onGetDetailsForNewComponent } from '../pages/dashboard/admin/adminDashboard.telefunc'; - -const COMPONENT_TYPES = [ - { value: 'cpu', label: 'CPU' }, - { value: 'gpu', label: 'Graphics Card' }, - { value: 'motherboard', label: 'Motherboard' }, - { value: 'memory', label: 'Memory' }, - { value: 'storage', label: 'Storage' }, - { value: 'power_supply', label: 'Power Supply' }, - { value: 'case', label: 'Case' }, - { value: 'cooler', label: 'CPU Cooler' }, -]; - -export default function AddComponentDialog({ open, onClose, onSuccess, prefillData }: { - open: boolean; - onClose: () => void; - onSuccess: () => void; - prefillData?: { - type?: string; - suggestionLink?: string; - suggestionDescription?: string; - }; -}) { - const [name, setName] = useState(''); - const [brand, setBrand] = useState(''); - const [price, setPrice] = useState(''); - const [imgUrl, setImgUrl] = useState(''); - const [type, setType] = useState(''); - - const [requiredFields, setRequiredFields] = useState([]); - const [multiTables, setMultiTables] = useState({}); - const [specificData, setSpecificData] = useState({}); - - const [loading, setLoading] = useState(false); - const [error, setError] = useState(''); - - useEffect(() => { - if (type) { - setLoading(true); - onGetDetailsForNewComponent({ type }) - .then((details) => { - console.log('Component details:', details); - - setRequiredFields(details.requiredFields || []); - setMultiTables(details.multiTables || {}); - - const initialData: any = {}; - - (details.requiredFields || []).forEach((field: any) => { - const fieldName = typeof field === 'string' ? field : field.name; - initialData[fieldName] = ''; - }); - - Object.keys(details.multiTables || {}).forEach((tableName) => { - initialData[tableName] = []; - }); - - setSpecificData(initialData); - }) - .catch((err) => { - console.error('Field load error:', err); - setError('Failed to load component fields'); - }) - .finally(() => setLoading(false)); - } - }, [type]); - - useEffect(() => { - if (open && prefillData) { - if (prefillData.type) setType(prefillData.type); - } - }, [open, prefillData]); - - const handleFieldChange = (fieldName: string, value: any) => { - setSpecificData((prev: any) => ({ - ...prev, - [fieldName]: value - })); - }; - - const handleAddMultiTableRow = (tableName: string) => { - const tableConfig = multiTables[tableName]; - const newRow: any = {}; - - tableConfig.forEach((field: string) => { - newRow[field] = ''; - }); - - setSpecificData((prev: any) => ({ - ...prev, - [tableName]: [...(prev[tableName] || []), newRow] - })); - }; - - const handleRemoveMultiTableRow = (tableName: string, index: number) => { - setSpecificData((prev: any) => ({ - ...prev, - [tableName]: prev[tableName].filter((_: any, i: number) => i !== index) - })); - }; - - const handleMultiTableFieldChange = (tableName: string, index: number, fieldName: string, value: any) => { - setSpecificData((prev: any) => { - const updated = [...prev[tableName]]; - updated[index] = { ...updated[index], [fieldName]: value }; - return { ...prev, [tableName]: updated }; - }); - }; - - const handleSubmit = async () => { - setError(''); - - if (!name.trim()) return setError('Name is required'); - if (!brand.trim()) return setError('Brand is required'); - if (!price || isNaN(Number(price)) || Number(price) <= 0) return setError('Valid price is required'); - if (!imgUrl.trim()) return setError('Image URL is required'); - if (!type) return setError('Component type is required'); - - setLoading(true); - try { - await onCreateNewComponent({ - name: name.trim(), - brand: brand.trim(), - price: Number(price), - imgUrl: imgUrl.trim(), - type, - specificData - }); - - onSuccess(); - handleClose(); - } catch (err) { - setError('Failed to create component. Please check all fields.'); - } finally { - setLoading(false); - } - }; - - const handleClose = () => { - setName(''); - setBrand(''); - setPrice(''); - setImgUrl(''); - setType(''); - setSpecificData({}); - setRequiredFields([]); - setMultiTables({}); - setError(''); - onClose(); - }; - - const formatFieldLabel = (fieldName: string): string => { - return fieldName - .replace(/([A-Z])/g, ' $1') - .replace(/^./, (str: string) => str.toUpperCase()); - }; - - const renderAllFields = () => { - const allFields = [...(requiredFields || []), ...(Object.values(multiTables).flat() || [])]; - - return ( - - {allFields.map((field: any, index: number) => { - const fieldName = typeof field === 'string' ? field : field.name; - - const isNumber = fieldName.includes('height') || fieldName.includes('length') || - fieldName.includes('wattage') || fieldName.includes('capacity') || - fieldName.includes('speed') || fieldName.includes('cores') || - fieldName.includes('threads') || fieldName.includes('vram') || - fieldName.includes('slots') || fieldName.includes('numSlots'); - - return ( - handleFieldChange(fieldName, isNumber ? Number(e.target.value) : e.target.value)} - type={isNumber ? 'number' : 'text'} - required - sx={{ mb: 2 }} - /> - ); - })} - - ); - }; - - return ( - - - Add New Component - - - - - - - {error && {error}} - - - - - Basic Information - - - setType(e.target.value)} - required - sx={{ mb: 2 }} - > - {COMPONENT_TYPES.map((option) => ( - - {option.label} - - ))} - - - - - setBrand(e.target.value)} - required - /> - - - setName(e.target.value)} - required - /> - - - - - - setPrice(e.target.value)} - required - inputProps={{ step: '0.01', min: '0' }} - /> - - - setImgUrl(e.target.value)} - required - /> - - - - - {imgUrl && ( - - - - )} - - {type && (requiredFields.length > 0 || Object.keys(multiTables).length > 0) && ( - - - {COMPONENT_TYPES.find(ct => ct.value === type)?.label} Specifications - - {renderAllFields()} - - )} - - {Object.keys(multiTables).map((tableName) => ( - - - - {tableName.replace(/([A-Z])/g, ' $1').replace(/^./, str => str.toUpperCase())} - - - - - {(specificData[tableName] || []).map((row: any, index: number) => ( - - - - Row {index + 1} - - handleRemoveMultiTableRow(tableName, index)} - > - - - - - - {multiTables[tableName].map((fieldName: string) => ( - - str.toUpperCase())} - value={row[fieldName] || ''} - onChange={(e) => handleMultiTableFieldChange(tableName, index, fieldName, e.target.value)} - /> - - ))} - - - ))} - - ))} - - - - - - - - - ); -} Index: components/BuildCard.tsx =================================================================== --- components/BuildCard.tsx (revision ff3a6146e85f77e90dc322a0ad0c9d9eb048c629) +++ (revision ) @@ -1,115 +1,0 @@ -import React, {useEffect, useState} from 'react'; -import {Card, CardContent, CardMedia, Typography, Box, Chip, CircularProgress} from '@mui/material'; -import StarIcon from '@mui/icons-material/Star'; -import {onGetBuildDetails} from "../pages/+Layout.telefunc"; - -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 [details, setDetails] = useState(null); - - const formattedPrice = new Intl.NumberFormat('en-US', { - style: 'currency', - currency: 'EUR' - }).format(build.total_price || 0); - - useEffect(() => { - setImageLoading(true); - onGetBuildDetails({buildId: build.id}) - .then(fullDetails => { - setDetails(fullDetails); - - const caseComponent = fullDetails.components?.find((c: any) => c.type === 'case'); - setCaseImage( - caseComponent?.imgUrl || - "https://placehold.co/600x400?text=PC+Build" - ); - }) - .catch((error) => { - console.error("Failed to load build details:", error); - setDetails(null); - }) - .finally(() => { - setImageLoading(false); - }); - }, [build.id]); - - if (imageLoading) { - return ( - - - - ); - } - - return ( - - - - - - - - - {build.name} - - - - - - {details?.description || "No description provided."} - - - - - - - - - {Number(build.avgRating || 0).toFixed(1)} - - - - - - ); -} Index: components/BuildDetailsDialog.tsx =================================================================== --- components/BuildDetailsDialog.tsx (revision ff3a6146e85f77e90dc322a0ad0c9d9eb048c629) +++ (revision ) @@ -1,405 +1,0 @@ -import React, {useEffect, useState} from 'react'; -import { - Dialog, DialogTitle, DialogContent, DialogActions, Button, Box, Typography, - IconButton, Tab, Tabs, Table, TableBody, TableCell, TableRow, Rating, TextField, Avatar, Chip, Alert, Snackbar -} from '@mui/material'; -import CloseIcon from '@mui/icons-material/Close'; -import AutoFixHighIcon from '@mui/icons-material/AutoFixHigh'; -import FavoriteIcon from '@mui/icons-material/Favorite'; -import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder'; -import PersonIcon from "@mui/icons-material/Person"; -import {onGetBuildDetails, onSetReview, onToggleFavorite, onCloneBuild, onSetRating} from '../pages/+Layout.telefunc'; -import {onGetBuildState} from '../pages/forge/forge.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, currentUser, isDashboardView = false}: { - open: boolean; - buildId: number | null; - onClose: () => void; - currentUser: any; - isDashboardView?: boolean; -}) { - 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 [isOwner, setIsOwner] = useState(false); - - const [reviewText, setReviewText] = useState(""); - const [ratingVal, setRatingVal] = useState(5); - - const [snackbar, setSnackbar] = useState<{ - open: boolean; - message: string; - severity: 'error' | 'warning' | 'info' | 'success'; - }>({ - open: false, - message: '', - severity: 'warning' - }); - - useEffect(() => { - if (open && buildId !== null) { - setLoading(true); - setReviewText(""); - setRatingVal(5); - - onGetBuildDetails({buildId}) - .then(data => { - setDetails(data); - if (data.userRating) setRatingVal(data.userRating); - if (data.userReview) setReviewText(data.userReview); - }) - .finally(() => setLoading(false)); - } - }, [open, buildId]); - - useEffect(() => { - if (open && buildId !== null) { - onGetBuildState({buildId}) - .then(state => { - setIsOwner(!!state); - }) - .catch(() => setIsOwner(false)); - } else { - setIsOwner(false); - } - }, [open, buildId]); - - useEffect(() => { - if (open) { - setTabIndex(0); - } - }, [open, buildId]); - - const handleFavorite = async () => { - if (!currentUser || buildId === null) return alert("Please login to favorite builds."); - const res = await onToggleFavorite({buildId}); - setDetails((prev: any) => ({...prev, isFavorite: res})); - }; - - const handleSubmitReview = async () => { - if (!currentUser || buildId === null) return alert("Please login to review."); - - await onSetReview({ - buildId, - content: reviewText, - }); - - await onSetRating({ - buildId, - value: ratingVal - }); - - const refreshed = await onGetBuildDetails({buildId}); - setDetails(refreshed); - }; - - const handleCloneConfirm = async () => { - if (!cloningBuildId) return; - - if(!currentUser){ - window.location.href="/auth/login"; - 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."); - setCloneDialogOpen(false); - setSnackbar({ - open: true, - message: 'Failed to clone build. Please try again!', - severity: 'error' - }) - } - }; - - const isCreator = currentUser && details && details.userId === currentUser; - - if (!open) return null; - - return ( - <> - - {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)} - - - ))} - - TOTAL - - {formatPrice(details.totalPrice)} - - - -
- - - - - - Builder's Notes - - - "{details.description || "No notes provided."}" - - - - {currentUser && ( - - {isDashboardView && isOwner ? ( - - ) : ( - - )} - - - )} - - - - )} - - {tabIndex === 1 && ( - - - {details.ratingStatistics.averageRating.toFixed(1)} - - - {details.ratingStatistics.ratingCount} ratings - - - - {currentUser && !isCreator && ( - - Your Review - - setRatingVal(v || 5)}/> - - setReviewText(e.target.value)} - sx={{mb: 1}} - /> - - - )} - - {currentUser && isCreator && ( - - 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! - - )} - - - )} - - - - )} - - - 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. - - - - - - - - setSnackbar(prev => ({...prev, open: false}))} - anchorOrigin={{vertical: 'bottom', horizontal: 'center'}} - > - setSnackbar(prev => ({...prev, open: false}))} - severity={snackbar.severity} - variant="filled" - sx={{width: '100%'}} - > - {snackbar.message} - - - - ); -} Index: components/ComponentDetailsDialog.tsx =================================================================== --- components/ComponentDetailsDialog.tsx (revision ff3a6146e85f77e90dc322a0ad0c9d9eb048c629) +++ (revision ) @@ -1,276 +1,0 @@ -import React, {useEffect, useState} from 'react'; -import { - Dialog, DialogTitle, DialogContent, DialogActions, Button, - Typography, Box, Chip, CircularProgress, IconButton, - Table, TableBody, TableCell, TableContainer, TableRow, Paper -} from '@mui/material'; -import CloseIcon from '@mui/icons-material/Close'; -import {onGetComponentDetails} from '../pages/+Layout.telefunc'; - -export default function ComponentDetailsDialog({open, component, onClose}: any) { - const [fullData, setFullData] = useState(null); - const [loading, setLoading] = useState(false); - - useEffect(() => { - if (open && component) { - setLoading(true); - onGetComponentDetails({componentId: component.id}) - .then(data => setFullData(data)) - .catch(console.error) - .finally(() => setLoading(false)); - } else { - setFullData(null); - } - }, [open, component]); - - if (!open || !component) return null; - - const displayData = fullData || component; - const specs = fullData?.details || {}; - - const formatMoney = (amount: number) => `$${Number(amount).toFixed(2)}`; - - const renderValue = (key: string, val: any) => { - if (Array.isArray(val)) { - 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(', '); - } - - const strVal = String(val); - const lowerKey = key.toLowerCase(); - - if (lowerKey.includes('capacity') || lowerKey.includes('vram') || lowerKey === 'memory') { - return `${strVal} GB`; - } - - if (lowerKey.includes('tdp') || lowerKey.includes('wattage')) { - return `${strVal} W`; - } - - if (lowerKey.includes('length') || lowerKey.includes('height') || lowerKey.includes('width')) { - return `${strVal} mm`; - } - - if (lowerKey.includes('clock')) { - return `${strVal} GHz`; - } - - if (lowerKey.includes('speed')) { - return `${strVal} MHz`; - } - - return strVal; - }; - - const formatKey = (key: string) => { - return key - .replace(/([A-Z])/g, ' $1') - .replace(/_/g, ' ') - .replace(/\b\w/g, c => c.toUpperCase()); - }; - - return ( - - - - - {displayData.brand} - - - {displayData.name} - - - - - - - - - {loading ? ( - - - - ) : ( - - - - - - - - - Technical Specifications - - - - - - - - Brand - - - {displayData.brand} - - - - {Object.entries(specs).map(([key, val]) => { - if (key === 'componentId' || key === 'id') return null; - - return ( - - - {formatKey(key)} - - - {renderValue(key, val)} - - - ); - })} - -
- - - - - {formatMoney(displayData.price)} - - - - - )} - - - - - - - ); -} Index: components/ComponentDialog.tsx =================================================================== --- components/ComponentDialog.tsx (revision ff3a6146e85f77e90dc322a0ad0c9d9eb048c629) +++ (revision ) @@ -1,600 +1,0 @@ -import React, {useEffect, useState} from 'react'; -import { - Dialog, DialogContent, IconButton, Box, Typography, - Slider, FormControl, InputLabel, Select, MenuItem, Checkbox, ListItemText, - Card, CardContent, CardMedia, Button, CircularProgress, AppBar, Toolbar, InputAdornment, TextField, - TextField as MuiTextField, DialogTitle, DialogActions, Snackbar, Alert, Drawer, Badge -} from '@mui/material'; -import CloseIcon from '@mui/icons-material/Close'; -import AddCircleIcon from '@mui/icons-material/AddCircle'; -import FilterListIcon from '@mui/icons-material/FilterList'; -import SearchIcon from "@mui/icons-material/Search"; - -import {onGetAllComponents, onGetAuthState, onSuggestComponent} from '../pages/+Layout.telefunc' -import {onGetCompatibleComponents} from '../pages/forge/forge.telefunc'; -import ComponentDetailsDialog from "./ComponentDetailsDialog"; - -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); - const [mobileFiltersOpen, setMobileFiltersOpen] = useState(false); - - useEffect(() => { - if (open && category) { - setSuggestForm({ - link: '', - description: '', - componentType: category - }); - } - }, [open, category]); - - useEffect(() => { - const timeoutId = setTimeout(() => { - setSearchQuery(tempSearchQuery); - }, 300); - return () => clearTimeout(timeoutId); - }, [tempSearchQuery]); - - useEffect(() => { - if (open && category) { - setSelectedBrands([]); - setSortOrder('price_desc'); - setTempSearchQuery(''); - setSearchQuery(''); - setPriceRange([0, 2000]); - } - }, [open, category]); - - - useEffect(() => { - if (open) { - onGetAuthState().then(userData => { - setUserId(userData.userId); - }); - } - }, [open]); - - useEffect(() => { - if (open && category) { - setLoading(true); - setSortOrder('price_desc'); - - 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) => { - const comps = data || []; - setComponents(comps); - - const brands = Array.from(new Set(comps.map((c: any) => c.brand))); - setAvailableBrands(brands as string[]); - const maxPrice = comps.length > 0 ? Math.max(...comps.map((c: any) => Number(c.price))) : 2000; - setPriceRange([0, Math.ceil(maxPrice)]); - }) - .catch((err) => { - console.error('[Dialog] fetch error:', err); - setComponents([]); - }) - .finally(() => setLoading(false)); - } - }, [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]; - const matchesSearch = searchQuery === "" || - comp.name.toLowerCase().includes(searchQuery.toLowerCase()) || - comp.brand.toLowerCase().includes(searchQuery.toLowerCase()); - - return matchesBrand && matchesPrice && matchesSearch; - }); - - if (sortOrder === 'price_asc') { - processedComponents.sort((a, b) => Number(a.price) - Number(b.price)); - } else if (sortOrder === 'price_desc') { - processedComponents.sort((a, b) => Number(b.price) - Number(a.price)); - } - - const handleBrandChange = (event: any) => { - const value = event.target.value; - setSelectedBrands(typeof value === 'string' ? value.split(',') : value); - }; - - const activeFiltersCount = selectedBrands.length + (sortOrder !== 'default' ? 1 : 0); - - const FilterContent = React.useMemo(() => ( - - 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]}+ - - - {userId && ( - - )} - - ), [tempSearchQuery, sortOrder, selectedBrands, availableBrands, priceRange, userId]); - - if (!open) return null; - - return ( - <> - - - - setMobileFiltersOpen(true)} - sx={{ - display: {xs: 'flex', md: 'none'}, - mr: 2 - }} - > - - - - - - - - Browsing: - - { - category === 'gpu' ? 'GRAPHICS CARDS' - : category === 'memory_card' ? 'STORAGE EXPANSION CARDS' - : category === 'power_supply' ? 'POWER SUPPLIES' - : category === 'network_card' ? 'NETWORK CARDS' - : category === 'network_adapters' ? 'NETWORK ADAPTERS' - : category === 'sound_card' ? 'SOUND CARDS' - : category === 'optical_drive' ? 'OPTICAL DRIVES' - : category?.toUpperCase()} - {mode === 'forge' && currentBuildId && ( - - COMPATIBILITY MODE - - )} - - - - - - - - - - {FilterContent} - - - {loading ? ( - - - - ) : ( - - {processedComponents.map((comp) => ( - - - - - - - - - - {comp.brand} - - - {comp.name} - - - - {formatMoney(comp.price)} - - - - - - {mode === 'forge' && onSelect && ( - - )} - - - - ))} - {processedComponents.length === 0 && ( - - - No compatible components found. - - {mode === 'forge' && ( - - (Try removing incompatible parts) - - )} - - )} - - )} - - - - setSelectedComponent(null)} - /> - - - setMobileFiltersOpen(false)} - sx={{zIndex: 1400}} - PaperProps={{ - sx: { - bgcolor: '#1e1e1e' - } - }} - disableScrollLock={true} - > - - - Filters - setMobileFiltersOpen(false)}> - - - - {FilterContent} - - - - 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: components/Footer.tsx =================================================================== --- components/Footer.tsx (revision ff3a6146e85f77e90dc322a0ad0c9d9eb048c629) +++ (revision ) @@ -1,41 +1,0 @@ -import React from 'react'; -import Box from '@mui/material/Box'; -import Typography from '@mui/material/Typography'; -import footerLogoUrl from '../assets/projectlogo.png'; - -export default function Footer() { - return ( - - theme.palette.mode === 'light' - ? theme.palette.grey[200] - : theme.palette.grey[800], - }} - > - - - - - - {'© '} - {new Date().getFullYear()} - {' PC Forge. All rights reserved.'} - - - - - ); -} Index: components/Navbar.tsx =================================================================== --- components/Navbar.tsx (revision ff3a6146e85f77e90dc322a0ad0c9d9eb048c629) +++ (revision ) @@ -1,325 +1,0 @@ -import React, { useEffect, useState } from "react"; -import AppBar from "@mui/material/AppBar"; -import Toolbar from "@mui/material/Toolbar"; -import Typography from "@mui/material/Typography"; -import Button from "@mui/material/Button"; -import Box from "@mui/material/Box"; -import Menu from "@mui/material/Menu"; -import MenuItem from "@mui/material/MenuItem"; -import IconButton from "@mui/material/IconButton"; -import Drawer from "@mui/material/Drawer"; -import List from "@mui/material/List"; -import ListItem from "@mui/material/ListItem"; -import ListItemButton from "@mui/material/ListItemButton"; -import ListItemIcon from "@mui/material/ListItemIcon"; -import ListItemText from "@mui/material/ListItemText"; -import Divider from "@mui/material/Divider"; -import Collapse from "@mui/material/Collapse"; - -import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'; -import MenuIcon from '@mui/icons-material/Menu'; -import CloseIcon from '@mui/icons-material/Close'; -import BuildIcon from '@mui/icons-material/Build'; -import ViewListIcon from '@mui/icons-material/ViewList'; -import ExpandLess from '@mui/icons-material/ExpandLess'; -import ExpandMore from '@mui/icons-material/ExpandMore'; -import PersonIcon from '@mui/icons-material/Person'; -import LogoutIcon from '@mui/icons-material/Logout'; -import LoginIcon from '@mui/icons-material/Login'; -import PersonAddIcon from '@mui/icons-material/PersonAdd'; - -import { - Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions -} from "@mui/material"; - -import MemoryIcon from '@mui/icons-material/Memory'; -import DeveloperBoardIcon from '@mui/icons-material/DeveloperBoard'; -import StorageIcon from '@mui/icons-material/Storage'; -import SdStorageIcon from '@mui/icons-material/SdStorage'; -import RouterIcon from '@mui/icons-material/Router'; -import LanIcon from '@mui/icons-material/Lan'; -import SpeakerIcon from '@mui/icons-material/Speaker'; -import AlbumIcon from '@mui/icons-material/Album'; -import SdCardIcon from '@mui/icons-material/SdCard'; -import CableIcon from '@mui/icons-material/Cable'; - -import LogoUrl from '../assets/projectlogo.png'; -import { onGetAuthState } from "../pages/+Layout.telefunc"; - -import ComponentDialog from "./ComponentDialog"; - -type AuthState = { isLoggedIn: boolean; username: string | null; isAdmin?: boolean }; - -const COMPONENT_CATEGORIES = [ - { id: 'cpu', label: 'Processors', icon: }, - { id: 'gpu', label: 'Graphics Cards', icon: }, - { id: 'motherboard', label: 'Motherboards', icon: }, - { id: 'memory', label: 'Memory (RAM)', icon: }, - { id: 'storage', label: 'Storage', icon: }, - { id: 'case', label: 'Cases', icon: }, - { id: 'power_supply', label: 'Power Supplies', icon: }, - { id: 'cooler', label: 'Cooling', icon: }, - { id: 'network_adapter', label: 'Network Adapters (WiFi)', icon: }, - { id: 'network_card', label: 'Network Cards (Ethernet)', icon: }, - { id: 'sound_card', label: 'Sound Cards', icon: }, - { id: 'optical_drive', label: 'Optical Drives', icon: }, - { id: 'memory_card', label: 'Storage Cards', icon: }, - { id: 'cables', label: 'Cables', icon: }, -]; - -export default function Navbar() { - const [auth, setAuth] = useState(null); - const [openLogoutDialog, setOpenLogoutDialog] = useState(false); - const [mobileDrawerOpen, setMobileDrawerOpen] = useState(false); - const [mobileComponentsOpen, setMobileComponentsOpen] = useState(false); - - const [anchorEl, setAnchorEl] = useState(null); - const openMenu = Boolean(anchorEl); - - const [browserOpen, setBrowserOpen] = useState(false); - const [selectedCategory, setSelectedCategory] = useState(null); - - const handleComponentsClick = (event: React.MouseEvent) => { - setAnchorEl(event.currentTarget); - }; - - const handleMenuClose = () => { - setAnchorEl(null); - }; - - const handleCategorySelect = (categoryId: string) => { - setSelectedCategory(categoryId); - setBrowserOpen(true); - handleMenuClose(); - setMobileDrawerOpen(false); - setMobileComponentsOpen(false); - }; - - const handleLogoutClick = (e: React.MouseEvent) => { - e.preventDefault(); - setOpenLogoutDialog(true); - setMobileDrawerOpen(false); - }; - - const confirmLogout = async () => { - setAuth({ isLoggedIn: false, username: null, isAdmin: false }); - setOpenLogoutDialog(false); - const csrfRes = await fetch("/api/auth/csrf"); - const { csrfToken } = await csrfRes.json(); - await fetch("/api/auth/signout", { - method: "POST", - headers: { "Content-Type": "application/x-www-form-urlencoded" }, - body: new URLSearchParams({ csrfToken: csrfToken, callbackUrl: "/" }), - }); - window.location.href = "/"; - }; - - useEffect(() => { - let active = true; - onGetAuthState() - .then((data) => active && setAuth({ - isLoggedIn: data.isLoggedIn, - username: data.username, - isAdmin: data.isAdmin - })) - .catch(() => active && setAuth({ isLoggedIn: false, username: null, isAdmin: false })); - return () => { active = false; }; - }, []); - - const checkDashboardUrl = auth?.isAdmin ? '/dashboard/admin' : '/dashboard/user'; - const onHoverNav = { - color: 'inherit', - '&:hover': { backgroundColor: '#ff8201', color: 'white', fontWeight: 'bold' } - }; - - return ( - <> - - - - window.location.href='/'} - /> - - PC Forge - - - - - - - - - {COMPONENT_CATEGORIES.map((cat) => ( - handleCategorySelect(cat.id)}> - {cat.icon} - {cat.label} - - ))} - - - - - - - - - {auth?.isLoggedIn ? ( - <> - - - - ) : ( - <> - - - - )} - - - setMobileDrawerOpen(true)} - sx={{ display: { xs: 'block', md: 'none' } }} - > - - - - - - setMobileDrawerOpen(false)} - sx={{ - display: { xs: 'block', md: 'none' }, - '& .MuiDrawer-paper': { width: 280 , height: '60%'} - }} - > - - Menu - setMobileDrawerOpen(false)}> - - - - - - - - { window.location.href = '/forge'; }}> - - - - - - - setMobileComponentsOpen(!mobileComponentsOpen)}> - - - {mobileComponentsOpen ? : } - - - - - {COMPONENT_CATEGORIES.map((cat) => ( - handleCategorySelect(cat.id)} - > - {cat.icon} - - - ))} - - - - - { window.location.href = '/completed-builds'; }}> - - - - - - - - {auth?.isLoggedIn ? ( - <> - - { window.location.href = checkDashboardUrl; }}> - - - - - - - - - - - - ) : ( - <> - - { window.location.href = '/auth/login'; }}> - - - - - - { window.location.href = '/auth/register'; }}> - - - - - - )} - - - - setOpenLogoutDialog(false)}> - Confirm Logout - - Are you sure you want to leave the Forge? - - - - - - - - setBrowserOpen(false)} - /> - - ); -}