Index: components/BuildCard.tsx
===================================================================
--- components/BuildCard.tsx (revision 1bf6e1f519ad45c39ba56ccdc473328a666f1335)
+++ components/BuildCard.tsx (revision 1bf6e1f519ad45c39ba56ccdc473328a666f1335)
@@ -0,0 +1,45 @@
+import React from 'react';
+import { Card, CardMedia, CardContent, Typography, Box, Chip } from '@mui/material';
+import StarIcon from '@mui/icons-material/Star';
+import PersonIcon from '@mui/icons-material/Person';
+
+export default function BuildCard({ build, onClick }: { build: any, onClick: () => void }) {
+ const formattedPrice = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(build.total_price || 0);
+
+ return (
+
+
+
+
+ {build.name}
+
+
+ {/*Ne se renderira user-ot*/}
+
+ {/* */}
+ {/* {build.user || 'Unknown'}*/}
+ {build.cpu}
+ {build.gpu}
+
+
+
+
+
+
+
+ {Number(build.avg_rating || 5).toFixed(1)}
+
+
+
+
+
+ );
+}
Index: components/BuildDetailsDialog.tsx
===================================================================
--- components/BuildDetailsDialog.tsx (revision 1bf6e1f519ad45c39ba56ccdc473328a666f1335)
+++ components/BuildDetailsDialog.tsx (revision 1bf6e1f519ad45c39ba56ccdc473328a666f1335)
@@ -0,0 +1,213 @@
+import React, { useEffect, useState } from 'react';
+import {
+ Dialog, DialogTitle, DialogContent, Button, Grid, Box, Typography,
+ IconButton, Tab, Tabs, Table, TableBody, TableCell, TableRow, Rating, TextField, Avatar, Divider, Chip, CardMedia
+} 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 { onGetBuildDetails, onSetReview, onToggleFavorite } from '../pages/+Layout.telefunc';
+import PersonIcon from "@mui/icons-material/Person";
+
+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) {
+ const [details, setDetails] = useState(null);
+ const [loading, setLoading] = useState(false);
+ const [tabIndex, setTabIndex] = useState(0);
+
+ const [reviewText, setReviewText] = useState("");
+ const [ratingVal, setRatingVal] = useState(5);
+
+ useEffect(() => {
+ if (open && buildId) {
+ setLoading(true);
+ onGetBuildDetails({ buildId })
+ .then(data => {
+ setDetails(data);
+ if (data.userRating) setRatingVal(data.userRating);
+ if (data.userReview) setReviewText(data.userReview);
+ })
+ .finally(() => setLoading(false));
+ }
+ }, [open, buildId]);
+
+ const handleFavorite = async () => {
+ if (!currentUser) return alert("Please login to favorite builds.");
+ const res = await onToggleFavorite({ buildId });
+ setDetails((prev: any) => ({ ...prev, isFavorite: res }));
+ };
+
+ const handleSubmitReview = async () => {
+ if (!currentUser) return alert("Please login to review.");
+ await onSetReview({ buildId, content: reviewText });
+
+ const refreshed = await onGetBuildDetails({ buildId });
+ setDetails(refreshed);
+ };
+
+ if (!open) return null;
+
+ // @ts-ignore
+ return (
+
+ );
+}
Index: components/Navbar.tsx
===================================================================
--- components/Navbar.tsx (revision 76b980b0450fc6309a3fe5f6150046d819eb6404)
+++ components/Navbar.tsx (revision 1bf6e1f519ad45c39ba56ccdc473328a666f1335)
@@ -71,6 +71,6 @@
{auth?.isLoggedIn ? (
<>
-
-
+
+
) : (
Index: database/drizzle/queries/builds.ts
===================================================================
--- database/drizzle/queries/builds.ts (revision 76b980b0450fc6309a3fe5f6150046d819eb6404)
+++ database/drizzle/queries/builds.ts (revision 1bf6e1f519ad45c39ba56ccdc473328a666f1335)
@@ -143,4 +143,5 @@
)
.groupBy(
+ buildsTable.id,
buildsTable.userId,
buildsTable.name,
Index: pages/auth/login/+Page.tsx
===================================================================
--- pages/auth/login/+Page.tsx (revision 76b980b0450fc6309a3fe5f6150046d819eb6404)
+++ pages/auth/login/+Page.tsx (revision 1bf6e1f519ad45c39ba56ccdc473328a666f1335)
@@ -26,5 +26,5 @@
setError("Invalid username or password");
} else {
- window.location.href = "/dashboard/user";
+ window.location.href = "/";
}
};
Index: pages/completed-builds/+Page.tsx
===================================================================
--- pages/completed-builds/+Page.tsx (revision 1bf6e1f519ad45c39ba56ccdc473328a666f1335)
+++ pages/completed-builds/+Page.tsx (revision 1bf6e1f519ad45c39ba56ccdc473328a666f1335)
@@ -0,0 +1,189 @@
+import React, { useEffect, useState } from 'react';
+import {
+ Container, Grid, Box, Typography, TextField, MenuItem, Select,
+ Slider, Button, Paper, InputAdornment
+} from '@mui/material';
+import SearchIcon from '@mui/icons-material/Search';
+import FilterListIcon from '@mui/icons-material/FilterList';
+
+import BuildCard from '../../components/BuildCard';
+import BuildDetailsDialog from '../../components/BuildDetailsDialog';
+
+import { onGetApprovedBuilds, onCloneBuild, onGetAuthState } from '../+Layout.telefunc';
+
+export default function CompletedBuildsPage() {
+ const [builds, setBuilds] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [userId, setUserId] = useState(null);
+ const [selectedBuildId, setSelectedBuildId] = useState(null);
+
+ const [sortBy, setSortBy] = useState('price_asc');
+ const [priceRange, setPriceRange] = useState([0, 5000]);
+ const [searchQuery, setSearchQuery] = useState("");
+
+ const loadBuilds = async () => {
+ setLoading(true);
+ try {
+ const [userData, data] = await Promise.all([
+ onGetAuthState(),
+ onGetApprovedBuilds({ q: searchQuery })
+ ]);
+ setUserId(userData.userId);
+
+ let sortedData = [...data];
+
+ switch (sortBy) {
+ case 'price_asc':
+ sortedData.sort((a, b) => Number(a.total_price) - Number(b.total_price));
+ break;
+ case 'price_desc':
+ sortedData.sort((a, b) => Number(b.total_price) - Number(a.total_price));
+ break;
+ case 'rating_desc':
+ sortedData.sort((a, b) => (Number(b.avgRating) || 0) - (Number(a.avgRating) || 0));
+ break;
+ case 'oldest':
+ sortedData.sort((a, b) => new Date(a.created_at).getTime() - new Date(b.created_at).getTime());
+ break;
+ case 'newest':
+ default:
+ sortedData.sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime());
+ break;
+ }
+
+ sortedData = sortedData.filter(b => {
+ const price = Number(b.total_price);
+ return price >= priceRange[0] && price <= priceRange[1];
+ });
+
+ setBuilds(sortedData);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ useEffect(() => {
+ loadBuilds();
+ }, [sortBy, priceRange, searchQuery]);
+
+ useEffect(() => {
+ loadBuilds();
+ }, [sortBy, searchQuery]);
+
+ const handleClone = async (buildId: number) => {
+ if (!userId) return alert("Please login to clone builds!");
+ if (confirm(`Clone this build?`)) {
+ await onCloneBuild({ buildId });
+ alert("Build cloned!");
+ setSelectedBuildId(null);
+ }
+ };
+
+ return (
+
+ Completed Builds
+
+ Browse community configurations. Filter by price, components, or popularity.
+
+
+
+
+
+
+
+ Filters
+
+
+ setSearchQuery(e.target.value)}
+ InputProps={{
+ startAdornment: ,
+ }}
+ sx={{ mb: 3 }}
+ />
+
+ Price Range
+
+ setPriceRange(newValue as number[])}
+ valueLabelDisplay="auto"
+ min={0}
+ max={5000}
+ step={100}
+ />
+
+ ${priceRange[0]}
+ ${priceRange[1]}+
+
+
+
+
+
+
+
+
+ {/* Toolbar */}
+
+ {builds.length} Builds Found
+
+
+ Sort by:
+
+
+
+
+ {loading ? (
+ Loading...
+ ) : (
+
+ {builds.map((build) => (
+
+
+ setSelectedBuildId(build.id)}
+ />
+
+
+ ))}
+ {builds.length === 0 && (
+
+
+ No builds found matching your filters.
+
+
+ )}
+
+ )}
+
+
+
+ setSelectedBuildId(null)}
+ onClone={handleClone}
+ />
+
+ );
+}
+
Index: pages/forge/+Page.tsx
===================================================================
--- pages/forge/+Page.tsx (revision 1bf6e1f519ad45c39ba56ccdc473328a666f1335)
+++ pages/forge/+Page.tsx (revision 1bf6e1f519ad45c39ba56ccdc473328a666f1335)
@@ -0,0 +1,5 @@
+export default function ForgePage(){
+ return (
+ Test Forge Page
+ )
+}
Index: pages/index/+Page.tsx
===================================================================
--- pages/index/+Page.tsx (revision 76b980b0450fc6309a3fe5f6150046d819eb6404)
+++ pages/index/+Page.tsx (revision 1bf6e1f519ad45c39ba56ccdc473328a666f1335)
@@ -1,38 +1,30 @@
import React, { useEffect, useState } from 'react';
import {
- Container, Box, Typography, Button, Grid, Card, CardMedia, CardContent,
- CardActions, Chip, Rating, Dialog, DialogTitle, DialogContent, DialogActions,
- IconButton, Divider
+ Container, Box, Typography, Button, Grid, IconButton, Dialog, DialogTitle, DialogContent
} from '@mui/material';
import CloseIcon from '@mui/icons-material/Close';
import AutoFixHighIcon from '@mui/icons-material/AutoFixHigh';
-import CommentIcon from '@mui/icons-material/Comment';
-import StarIcon from '@mui/icons-material/Star';
-import HardwareIcon from '@mui/icons-material/Memory';
-import ListIcon from '@mui/icons-material/List'; // Icon for "Show All"
+import ListIcon from '@mui/icons-material/List';
-// --- PLACEHOLDER ASSETS ---
-const PLACEHOLDER_IMG = "https://placehold.co/600x400?text=Gaming+PC";
+import BuildDetailsDialog from '../../components/BuildDetailsDialog';
+import BuildCard from '../../components/BuildCard';
-import { onGetHighestRankedBuilds, onCloneBuild } from './buildCards.telefunc';
-import {onGetApprovedBuilds, onGetAuthState} from '../+Layout.telefunc';
-import {getAuthState} from "../../server/telefunc/ctx"; //
+import { onGetApprovedBuilds, onGetAuthState, onCloneBuild } from '../+Layout.telefunc';
export default function HomePage() {
const [data, setData] = useState(null);
- const [selectedBuild, setSelectedBuild] = useState(null); // For Detail Popup
- const [openDetailPopup, setOpenDetailPopup] = useState(false);
- // NEW: Popup for "All Top Ranked Builds"
+ const [selectedBuildId, setSelectedBuildId] = useState(null);
+
const [openRankedPopup, setOpenRankedPopup] = useState(false);
useEffect(() => {
- async function loadSite(){
- try{
+ async function loadSite() {
+ try {
const [
- authData, highestRankedBuilds, commnityBuilds
+ authData, highestRankedBuilds, communityBuilds
] = await Promise.all([
onGetAuthState(),
- onGetHighestRankedBuilds({ limit: 3 }),
+ onGetApprovedBuilds({ limit: 3 , sort: 'rating_desc' }),
onGetApprovedBuilds({ limit: 12 })
]);
@@ -42,26 +34,19 @@
userId: authData.userId,
prebuilts: highestRankedBuilds,
- communityBuilds: commnityBuilds
+ communityBuilds: communityBuilds
});
} catch (error) {
console.error("Error loading homepage data:", error);
}
- }
+ }
+ loadSite();
+ }, []);
- loadSite();
-}, []);
-
- // Open Build Details
- const handleCardClick = (build: any) => {
- setSelectedBuild(build);
- setOpenDetailPopup(true);
- };
-
- const handleClone = async () => {
+ const handleCloneWrapper = async (buildId: number) => {
if (!data?.isLoggedIn) return alert("Please login to clone builds!");
- if (confirm(`Clone "${selectedBuild.name}" to your dashboard?`)) {
- await onCloneBuild({ buildId: selectedBuild.id });
+ if (confirm(`Clone this build to your dashboard?`)) {
+ await onCloneBuild({ buildId });
alert("Build cloned! Check your dashboard.");
- setOpenDetailPopup(false);
+ setSelectedBuildId(null);
}
};
@@ -74,16 +59,16 @@
position: 'relative', height: '500px',
display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'white',
- '&::before': { content: '""', position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', backgroundColor: 'rgba(0,0,0,0.6)' }
+ '&::before': {
+ content: '""', position: 'absolute', top: 0, left: 0, width: '100%', height: '100%',
+ backgroundColor: 'rgba(0,0,0,0.6)'
+ }
}}>
Forge Your Ultimate Machine
-
+
Build, share, discuss, and discover custom PC configurations.
-
- Join the community today.
-
-
- } sx={{ fontSize: '1.2rem', px: 4, py: 1.5 }}>
+ }
+ sx={{ fontSize: '1.2rem', px: 4, py: 1.5, mt: 2 }}>
Start Forging
@@ -92,37 +77,42 @@
-
+
Hall of Fame
- The highest rated configurations from across the community.
+
+ The highest rated configurations from across the community.
+
- }
- onClick={() => setOpenRankedPopup(true)}
- >
+ } onClick={() => setOpenRankedPopup(true)}>
Show All Top Ranked
-
-
-
- The Elite
-
- These 3 builds represent the pinnacle of performance and looks as voted by the PC Forge community.
-
-
-
+
+ {/**/}
+ {/* */}
+ {/* The Elite*/}
+ {/* The top 3 community-voted builds.*/}
+ {/* */}
+ {/**/}
- {data.prebuilts.map((build: any) => (
-
- handleCardClick(build)} />
+ {data.prebuilts.slice(0, 3).map((build: any) => (
+
+
+ setSelectedBuildId(build.id)}
+ />
+
))}
+
@@ -130,5 +120,8 @@
{data.communityBuilds.map((build: any) => (
- handleCardClick(build)} />
+ setSelectedBuildId(build.id)}
+ />
))}
@@ -138,56 +131,14 @@
-
-
+ setSelectedBuildId(null)}
+ onClone={handleCloneWrapper}
+ />
@@ -199,11 +150,13 @@
-
{data.prebuilts.concat(data.communityBuilds).map((build: any) => (
- {
- setOpenRankedPopup(false);
- handleCardClick(build);
- }} />
+ {
+ setOpenRankedPopup(false);
+ setSelectedBuildId(build.id); // Open details from popup
+ }}
+ />
))}
@@ -224,32 +177,2 @@
);
}
-
-function BuildCard({ build, onClick }: { build: any, onClick: () => void }) {
- return (
-
-
-
- {build.name}
-
-
-
-
- {Number(build.avgRating || 0).toFixed(1)}
-
-
- {build.commentCount || 0} reviews
-
-
-
-
- );
-}
-
-function ComponentRow({ name, value }: { name: string, value: string }) {
- return (
-
- {name}
- {value}
-
- );
-}