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<any>(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 (
+        <Dialog open={open} onClose={onClose} maxWidth="md" fullWidth scroll="paper">
+            {loading || !details ? (
+                <Box sx={{ p: 5, textAlign: 'center' }}>Loading Forge Schematics...</Box>
+            ) : (
+                <>
+                    <DialogTitle sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', bgcolor: '#ff8201' }}>
+                        <Box>
+                            <Typography variant="h5" fontWeight="bold">{details.name}</Typography>
+                            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                                <PersonIcon sx={{ fontSize: 16 }} />
+                                <Typography variant="subtitle2" color="text.secondary" fontWeight="bold">
+                                    by {details.creator}
+                                </Typography>
+                                <Chip label={formatPrice(details.totalPrice)} size="small" color="primary" variant="outlined" />
+                            </Box>
+                        </Box>
+                        <IconButton onClick={onClose}><CloseIcon /></IconButton>
+                    </DialogTitle>
+
+                    <DialogContent sx={{ p: 0 }}>
+                        <Box sx={{ borderBottom: 1, borderColor: 'divider', px: 2, bgcolor: 'primary', position: 'sticky', top: 0, zIndex: 1 }}>
+                            <Tabs value={tabIndex} onChange={(_, v) => setTabIndex(v)}>
+                                <Tab label="Specs" />
+                                <Tab label={`Reviews (${details.ratingStatistics.ratingCount})`} />
+                            </Tabs>
+                        </Box>
+
+                        <Box sx={{ p: 3 }}>
+                            {tabIndex === 0 && (
+                                <Grid container spacing={4}>
+                                    <Grid item xs={12} md={8}>
+                                        <Table size="small">
+                                            <TableBody>
+                                                {details.components.map((comp: any) => (
+                                                    <TableRow key={comp.id}>
+                                                        <TableCell sx={{ width: 50 }}>
+                                                            {/*<Avatar*/}
+                                                            {/*    src={comp.img_url || undefined}*/}
+                                                            {/*    variant="rounded"*/}
+                                                            {/*    sx={{ width: 40, height: 40, bgcolor: '#ff8201' }}*/}
+                                                            {/*>*/}
+                                                            {/*    {comp.type?.[0]?.toUpperCase()}*/}
+                                                            {/*</Avatar>*/}
+                                                            {/*<PersonIcon sx={{ fontSize: 16 }} />*/}
+                                                            <CardMedia
+                                                                component="img"
+                                                                height="50"
+                                                                width="50"
+                                                                image={"https://placehold.co/400x400?text=CPU"}
+
+                                                            />
+                                                        </TableCell>
+                                                        <TableCell>
+                                                            <Typography variant="body2" color="text.secondary" sx={{ fontSize: '0.75rem', textTransform: 'uppercase' }}>
+                                                                {comp.type}
+                                                            </Typography>
+                                                            <Typography variant="body1" fontWeight="500">
+                                                                {comp.brand} {comp.name}
+                                                            </Typography>
+                                                        </TableCell>
+                                                        <TableCell align="right" sx={{ fontWeight: 'bold', color: '#ff8201' }}>
+                                                            {formatPrice(comp.price)}
+                                                        </TableCell>
+                                                    </TableRow>
+                                                ))}
+                                                <TableRow sx={{ bgcolor: '#424343' }}>
+                                                    <TableCell colSpan={2} sx={{ fontWeight: 'bold', color: '#ff8201' }}>TOTAL</TableCell>
+                                                    <TableCell align="right" sx={{ fontWeight: 'bold', fontSize: '1.1rem', color: 'primary.main' }}>
+                                                        {formatPrice(details.totalPrice)}
+                                                    </TableCell>
+                                                </TableRow>
+                                            </TableBody>
+                                        </Table>
+                                    </Grid>
+
+                                    <Grid item xs={12} md={4}>
+                                        <Box sx={{ bgcolor: '#424343', p: 2, borderRadius: 2, mb: 2 }}>
+                                            <Typography color="primary.main" gutterBottom fontWeight="bold">Builder's Notes</Typography>
+                                            <Typography color="primary.main" variant="body2" sx={{ fontStyle: 'italic' }}>
+                                                "{details.description || "No notes provided."}"
+                                            </Typography>
+                                        </Box>
+
+                                        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+                                            <Button
+                                                variant="contained"
+                                                color="primary"
+                                                size="large"
+                                                startIcon={<AutoFixHighIcon />}
+                                                onClick={() => onClone({ buildId: details.id })}
+                                            >
+                                                Clone & Edit
+                                            </Button>
+                                            <Button
+                                                variant={details.isFavorite ? "contained" : "outlined"}
+                                                color={details.isFavorite ? "error" : "primary"}
+                                                startIcon={details.isFavorite ? <FavoriteIcon /> : <FavoriteBorderIcon />}
+                                                onClick={handleFavorite}
+                                            >
+                                                {details.isFavorite ? "Favorited" : "Add to Favorites"}
+                                            </Button>
+                                        </Box>
+                                    </Grid>
+                                </Grid>
+                            )}
+
+                            {tabIndex === 1 && (
+                                <Box>
+                                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 4, p: 2, bgcolor: '#5e5e5e', borderRadius: 2 }}>
+                                        <Typography variant="h3" fontWeight="bold">{details.ratingStatistics.averageRating.toFixed(1)}</Typography>
+                                        <Box>
+                                            <Rating value={details.ratingStatistics.averageRating} readOnly precision={0.5} />
+                                            <Typography variant="body2" color="text.secondary">{details.ratingStatistics.ratingCount} ratings</Typography>
+                                        </Box>
+                                    </Box>
+
+                                    {currentUser && (
+                                        <Box sx={{ mb: 4, p: 2, border: '1px solid #ddd', borderRadius: 2 }}>
+                                            <Typography variant="subtitle2" gutterBottom>Your Review</Typography>
+                                            <Box sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>
+                                                <Rating value={ratingVal} onChange={(_, v) => setRatingVal(v || 5)} />
+                                            </Box>
+                                            <TextField
+                                                fullWidth
+                                                multiline
+                                                rows={2}
+                                                placeholder="Share your thoughts on this build..."
+                                                value={reviewText}
+                                                onChange={(e) => setReviewText(e.target.value)}
+                                                sx={{ mb: 1 }}
+                                            />
+                                            <Button size="small" variant="contained" onClick={handleSubmitReview}>
+                                                Submit Review
+                                            </Button>
+                                        </Box>
+                                    )}
+
+                                    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2}}>
+                                        {details.reviews.map((rev: any, i: number) => (
+                                            <Box key={i} sx={{ pb: 2, borderBottom: '1px solid #eee'}}>
+                                                <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 0.5 }}>
+                                                    <Typography fontWeight="bold" variant="body2">{rev.username}</Typography>
+                                                    <Typography variant="caption" color="text.secondary">{rev.createdAt}</Typography>
+                                                </Box>
+                                                <Typography variant="body2">{rev.content}</Typography>
+                                            </Box>
+                                        ))}
+                                        {details.reviews.length === 0 && (
+                                            <Typography color="text.secondary" align="center">No reviews yet. Be the first!</Typography>
+                                        )}
+                                    </Box>
+                                </Box>
+                            )}
+                        </Box>
+                    </DialogContent>
+                </>
+            )}
+        </Dialog>
+    );
+}