Deliberations frontend

apps/frontend/src/app/[locale]/lems/(volunteer)/deliberation/[category]/components/controls-panel.tsx

@@ -0,0 +1,191 @@
+'use client';
+
+import { useState, useCallback } from 'react';
+import {
+  Stack,
+  Box,
+  Typography,
+  Button,
+  Autocomplete,
+  TextField,
+  Chip,
+  alpha,
+  useTheme
+} from '@mui/material';
+import { PlayArrow, Lock } from '@mui/icons-material';
+import { useCategoryDeliberation } from '../deliberation-context';
+
+export function ControlsPanel() {
+  const theme = useTheme();
+  const { deliberation, teams, startDeliberation, availableTeams } = useCategoryDeliberation();
+  const [selectedTeam1, setSelectedTeam1] = useState<string | null>(null);
+  const [selectedTeam2, setSelectedTeam2] = useState<string | null>(null);
+
+  const handleStartDeliberation = useCallback(async () => {
+    await startDeliberation();
+  }, [startDeliberation]);
+
+  const isInProgress = deliberation?.status === 'in-progress';
+
+  const teamOptions = teams.map(t => ({
+    label: `${t.number} - ${t.name}`,
+    value: t.id
+  }));
+
+  return (
+    <Stack
+      sx={{
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        p: 2,
+        gap: 2
+      }}
+    >
+      {/* Status Card */}
+      <Box
+        sx={{
+          p: 2,
+          background: `linear-gradient(135deg, ${theme.palette.primary.main}, ${theme.palette.primary.dark})`,
+          color: 'white',
+          borderRadius: 1
+        }}
+      >
+        <Typography variant="h6" sx={{ fontWeight: 600, mb: 1 }}>
+          Status
+        </Typography>
+        <Typography variant="body2" sx={{ mb: 2 }}>
+          {deliberation?.status === 'in-progress' ? 'In Progress' : 'Not Started'}
+        </Typography>
+
+        {!isInProgress ? (
+          <Button
+            variant="contained"
+            fullWidth
+            startIcon={<PlayArrow />}
+            onClick={handleStartDeliberation}
+            sx={{
+              bgcolor: '#fff',
+              color: theme.palette.primary.main,
+              '&:hover': {
+                bgcolor: alpha('#fff', 0.9)
+              },
+              fontWeight: 600
+            }}
+          >
+            Start Deliberation
+          </Button>
+        ) : (
+          <Button
+            variant="contained"
+            fullWidth
+            startIcon={<Lock />}
+            disabled
+            sx={{
+              bgcolor: alpha('white', 0.3),
+              color: 'white',
+              fontWeight: 600
+            }}
+          >
+            Deliberation Active
+          </Button>
+        )}
+      </Box>
+
+      {/* Comparison Card */}
+      <Box
+        sx={{
+          p: 2,
+          border: `1px solid ${theme.palette.divider}`,
+          borderRadius: 1,
+          flex: 1,
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 1
+        }}
+      >
+        <Typography variant="subtitle2" sx={{ fontWeight: 600 }}>
+          Compare Teams
+        </Typography>
+
+        <Box sx={{ display: 'flex', gap: 1 }}>
+          <Autocomplete
+            options={teamOptions}
+            value={teamOptions.find(o => o.value === selectedTeam1) || null}
+            onChange={(_, value) => setSelectedTeam1(value?.value || null)}
+            renderInput={params => <TextField {...params} label="Team 1" size="small" />}
+            size="small"
+            fullWidth
+            sx={{ flex: 1 }}
+          />
+          <Autocomplete
+            options={teamOptions}
+            value={teamOptions.find(o => o.value === selectedTeam2) || null}
+            onChange={(_, value) => setSelectedTeam2(value?.value || null)}
+            renderInput={params => <TextField {...params} label="Team 2" size="small" />}
+            size="small"
+            fullWidth
+            sx={{ flex: 1 }}
+          />
+        </Box>
+
+        <Button variant="outlined" fullWidth disabled sx={{ mt: 'auto' }}>
+          Compare
+        </Button>
+        <Typography variant="caption" color="textSecondary">
+          Coming Soon
+        </Typography>
+      </Box>
+
+      {/* Available Teams Pool */}
+      <Box
+        sx={{
+          p: 2,
+          border: `1px solid ${theme.palette.divider}`,
+          borderRadius: 1,
+          flex: 1,
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 1,
+          minHeight: 0
+        }}
+      >
+        <Typography variant="subtitle2" sx={{ fontWeight: 600 }}>
+          Available Teams
+        </Typography>
+
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 0.5,
+            overflowY: 'auto',
+            flex: 1,
+            minHeight: 0
+          }}
+        >
+          {availableTeams.length === 0 ? (
+            <Typography variant="caption" color="textSecondary" sx={{ py: 2, textAlign: 'center' }}>
+              No available teams
+            </Typography>
+          ) : (
+            availableTeams.map(teamId => {
+              const team = teams.find(t => t.id === teamId);
+              if (!team) return null;
+
+              return (
+                <Chip
+                  key={team.id}
+                  label={`${team.number} - ${(team.normalizedScores.total || 0).toFixed(2)}`}
+                  variant="outlined"
+                  size="small"
+                  sx={{ justifyContent: 'flex-start' }}
+                />
+              );
+            })
+          )}
+        </Box>
+      </Box>
+    </Stack>
+  );
+}

apps/frontend/src/app/[locale]/lems/(volunteer)/deliberation/[category]/components/deliberation-grid.tsx

@@ -0,0 +1,77 @@
+'use client';
+
+import { Grid, Box, Paper } from '@mui/material';
+import { DeliberationTable } from './deliberation-table';
+import { PicklistPanel } from './picklist-panel';
+import { ControlsPanel } from './controls-panel';
+import { ScoresChart } from './scores-chart';
+
+export function DeliberationGrid() {
+  return (
+    <Box sx={{ p: 2, height: '100vh', display: 'flex', flexDirection: 'column', gap: 2 }}>
+      {/* Main content grid */}
+      <Grid container spacing={2} sx={{ flex: 1, minHeight: 0 }}>
+        {/* Left column - Data Table */}
+        <Grid size={{ xs: 12, md: 8 }} sx={{ minHeight: 0 }}>
+          <Paper
+            sx={{
+              height: '100%',
+              display: 'flex',
+              flexDirection: 'column',
+              borderRadius: 2,
+              boxShadow: theme => theme.shadows[2]
+            }}
+          >
+            <DeliberationTable />
+          </Paper>
+        </Grid>
+
+        {/* Right columns - Controls and Picklist */}
+        <Grid
+          size={{ xs: 12, md: 4 }}
+          sx={{ minHeight: 0, display: 'flex', flexDirection: 'column', gap: 2 }}
+        >
+          {/* Controls Panel - Top */}
+          <Paper
+            sx={{
+              flex: 1,
+              borderRadius: 2,
+              boxShadow: theme => theme.shadows[2],
+              display: 'flex',
+              flexDirection: 'column',
+              overflow: 'hidden'
+            }}
+          >
+            <ControlsPanel />
+          </Paper>
+
+          {/* Picklist Panel - Bottom */}
+          <Paper
+            sx={{
+              flex: 1,
+              borderRadius: 2,
+              boxShadow: theme => theme.shadows[2],
+              display: 'flex',
+              flexDirection: 'column',
+              overflow: 'hidden'
+            }}
+          >
+            <PicklistPanel />
+          </Paper>
+        </Grid>
+      </Grid>
+
+      {/* Bottom - Chart */}
+      <Paper
+        sx={{
+          height: '350px',
+          borderRadius: 2,
+          boxShadow: theme => theme.shadows[2],
+          p: 2
+        }}
+      >
+        <ScoresChart />
+      </Paper>
+    </Box>
+  );
+}