Index: components/ComponentDetailsDialog.tsx =================================================================== --- components/ComponentDetailsDialog.tsx (revision a932c9ee67f19f8edeb101f6ee34cb81e6572601) +++ components/ComponentDetailsDialog.tsx (revision a932c9ee67f19f8edeb101f6ee34cb81e6572601) @@ -0,0 +1,189 @@ +import React, {useEffect, useState} from 'react'; +import { + Dialog, DialogTitle, DialogContent, DialogActions, Button, + Typography, Box, Grid, 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 && typeof val[0] === 'object') { + return val.map((v: any) => v.formFactor || v.socket || JSON.stringify(v)).join(', '); + } + return val.join(', '); + } + + const strVal = String(val); + const lowerKey = key.toLowerCase(); + + // Dodava merni edinici vo zavisnost koja komponenta e + 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 a932c9ee67f19f8edeb101f6ee34cb81e6572601) +++ components/ComponentDialog.tsx (revision a932c9ee67f19f8edeb101f6ee34cb81e6572601) @@ -0,0 +1,204 @@ +import React, { useEffect, useState } from 'react'; +import { + Dialog, DialogContent, IconButton, Grid, Box, Typography, + Slider, FormControl, InputLabel, Select, MenuItem, Checkbox, ListItemText, + Card, CardContent, CardMedia, Button, CircularProgress, Divider, AppBar, Toolbar +} 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 ComponentDetailsDialog from "./ComponentDetailsDialog"; + +const formatMoney = (amount: number) => `$${amount}`; + +export default function ComponentBrowserDialog({ open, category, onClose }: 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'); + + useEffect(() => { + if (open && category) { + setLoading(true); + setSortOrder('price_desc'); + + onGetAllComponents({ componentType: category }) + .then((data) => { + setComponents(data); + + const brands = Array.from(new Set(data.map((c: any) => c.brand))); + setAvailableBrands(brands as string[]); + + const maxPrice = data.length > 0 ? Math.max(...data.map((c: any) => Number(c.price))) : 2000; + setPriceRange([0, Math.ceil(maxPrice)]); + }) + .catch(console.error) + .finally(() => setLoading(false)); + } + }, [open, category]); + + 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; + }); + + 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); + }; + + if (!open) return null; + + return ( + + + + + Browsing: {category === 'gpu' ? 'Graphics Cards' : category?.toUpperCase()} + + + + + + + + + + + + Sort By + + + 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} + + + {comp.name} + + + + + {formatMoney(comp.price)} + + + + + + + + + ))} + {processedComponents.length === 0 && ( + + No components match. + + )} + + )} + + + setSelectedComponent(null)} + /> + + ); +} Index: pages/dashboard/admin/+Page.tsx =================================================================== --- pages/dashboard/admin/+Page.tsx (revision a932c9ee67f19f8edeb101f6ee34cb81e6572601) +++ pages/dashboard/admin/+Page.tsx (revision a932c9ee67f19f8edeb101f6ee34cb81e6572601) @@ -0,0 +1,232 @@ +import React, { useEffect, useState } from 'react'; +import { + Container, Grid, Paper, Typography, Box, Avatar, Divider, Button, + CircularProgress, Table, TableBody, TableCell, TableHead, TableRow, + Chip, IconButton, TextField, Dialog, DialogTitle, DialogContent, DialogActions +} from '@mui/material'; +import AdminPanelSettingsIcon from '@mui/icons-material/AdminPanelSettings'; +import CheckCircleIcon from '@mui/icons-material/CheckCircle'; +import CancelIcon from '@mui/icons-material/Cancel'; +import BuildIcon from '@mui/icons-material/Build'; +import MemoryIcon from '@mui/icons-material/Memory'; + +import { + getAdminInfoAndData, + onSetBuildApprovalStatus, + onSetComponentSuggestionStatus +} from './adminDashboard.telefunc'; + +import BuildCard from '../../../components/BuildCard'; +import BuildDetailsDialog from '../../../components/BuildDetailsDialog'; + +export default function AdminDashboard() { + const [data, setData] = useState(null); + const [loading, setLoading] = useState(true); + const [selectedBuildId, setSelectedBuildId] = useState(null); + + const [suggestionDialog, setSuggestionDialog] = useState<{ open: boolean, id: number | null, action: 'approved' | 'rejected' }>({ open: false, id: null, action: 'approved' }); + const [adminComment, setAdminComment] = useState(""); + + const loadData = () => { + getAdminInfoAndData() + .then(res => { setData(res); setLoading(false); }) + .catch(err => { + console.error(err); + alert("Failed to load admin data. Are you an admin?"); + }); + }; + + useEffect(() => { loadData(); }, []); + + const handleBuildReview = async (buildId: number, isApproved: boolean) => { + if (!confirm(`Are you sure you want to ${isApproved ? 'APPROVE' : 'REJECT'} this build?`)) return; + try { + await onSetBuildApprovalStatus({ buildId, isApproved }); + loadData(); + } catch (e) { alert("Action failed"); } + }; + + const openSuggestionReview = (id: number, action: 'approved' | 'rejected') => { + setSuggestionDialog({ open: true, id, action }); + setAdminComment(action === 'approved' ? "Approved by admin." : "Rejected: "); + }; + + const submitSuggestionReview = async () => { + if (!suggestionDialog.id) return; + try { + await onSetComponentSuggestionStatus({ + suggestionId: suggestionDialog.id, + status: suggestionDialog.action, + adminComment: adminComment + }); + // console.error("Test za admincomment: ", adminComment); + setSuggestionDialog({ ...suggestionDialog, open: false }); + loadData(); + } catch (e) { alert("Failed to update suggestion"); } + }; + + if (loading) return ; + if (!data) return Access Denied; + + return ( + + + + + + + + {data.admin.username} + {data.admin.email} + + + + + + + {data.pendingBuilds?.length || 0} + + Pending Builds + + + + + + + + + + + + Suggested Components ({data.componentSuggestions?.length || 0}) + + + + {data.componentSuggestions?.length === 0 ? ( + No pending suggestions. + ) : ( + + + + Link/Description + Type + User + Actions + + + + {data.componentSuggestions.map((sug: any) => ( + + + + {sug.description || sug.link} + + + {sug.componentType} + {sug.userId} + + openSuggestionReview(sug.id, 'approved')}> + + + openSuggestionReview(sug.id, 'rejected')}> + + + + + ))} + +
+ )} + + + + + + + + + Builds Waiting for Approval ({data.pendingBuilds?.length || 0}) + + + + {data.pendingBuilds?.length === 0 ? ( + No pending builds. + ) : ( + + {data.pendingBuilds.map((build: any) => ( + + + setSelectedBuildId(build.id)} + /> + + + + + + + ))} + + )} + + + + + + + My Builds / Sandbox + + {data.userBuilds?.length === 0 ? ( + No builds created by admin. + ) : ( + + {data.userBuilds.slice(0, 4).map((build: any) => ( + + setSelectedBuildId(build.id)} + /> + + ))} + + )} + + + + + + + + setSuggestionDialog({...suggestionDialog, open: false})}> + Review Suggestion + + Status: {suggestionDialog.action.toUpperCase()} + setAdminComment(e.target.value)} + /> + + + + + + + + setSelectedBuildId(null)} + onClone={() => alert("Clone disabled in admin view")} + /> + + ); +}