feat: initial project setup with frontend mockup

- Docker Compose setup with nginx reverse proxy and frontend service - React + Vite + Tailwind CSS configuration - Complete mockup of all application views: - Authentication (login/register) - Events list and selection - Event chat with matchmaking - 1:1 private chat with WebRTC P2P video transfer mockup - Partner rating system - Collaboration history - Mock data for users, events, messages, matches, and ratings - All UI text and messages in English - Project documentation (CONTEXT.md, TODO.md, README.md, QUICKSTART.md)
2025-11-12 17:50:44 +01:00
commit 80ff4a70bf
38 changed files with 7213 additions and 0 deletions
--- a/frontend/src/pages/RatePartnerPage.jsx
+++ b/frontend/src/pages/RatePartnerPage.jsx
@@ -0,0 +1,135 @@
+import { useState } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import Layout from '../components/layout/Layout';
+import { mockUsers } from '../mocks/users';
+import { Star } from 'lucide-react';
+
+const RatePartnerPage = () => {
+  const { matchId } = useParams();
+  const navigate = useNavigate();
+  const [rating, setRating] = useState(0);
+  const [hoveredRating, setHoveredRating] = useState(0);
+  const [comment, setComment] = useState('');
+  const [wouldCollaborateAgain, setWouldCollaborateAgain] = useState(true);
+  const [submitting, setSubmitting] = useState(false);
+
+  // Partner user (mockup)
+  const partner = mockUsers[1]; // sarah_swing
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (rating === 0) {
+      alert('Please select a rating (1-5 stars)');
+      return;
+    }
+
+    setSubmitting(true);
+
+    // Mockup - in the future will be API call
+    setTimeout(() => {
+      alert('Rating saved!');
+      navigate('/history');
+    }, 500);
+  };
+
+  return (
+    <Layout>
+      <div className="max-w-2xl mx-auto">
+        <div className="bg-white rounded-lg shadow-md p-8">
+          <h1 className="text-3xl font-bold text-gray-900 mb-6 text-center">
+            Rate the collaboration
+          </h1>
+
+          {/* Partner Info */}
+          <div className="flex items-center justify-center space-x-4 mb-8 p-6 bg-gray-50 rounded-lg">
+            <img
+              src={partner.avatar}
+              alt={partner.username}
+              className="w-16 h-16 rounded-full"
+            />
+            <div>
+              <h3 className="text-xl font-bold text-gray-900">{partner.username}</h3>
+              <p className="text-gray-600">⭐ {partner.rating} • {partner.matches_count} collaborations</p>
+            </div>
+          </div>
+
+          <form onSubmit={handleSubmit} className="space-y-6">
+            {/* Rating Stars */}
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-3 text-center">
+                How would you rate the collaboration?
+              </label>
+              <div className="flex justify-center space-x-2">
+                {[1, 2, 3, 4, 5].map((star) => (
+                  <button
+                    key={star}
+                    type="button"
+                    onClick={() => setRating(star)}
+                    onMouseEnter={() => setHoveredRating(star)}
+                    onMouseLeave={() => setHoveredRating(0)}
+                    className="focus:outline-none transition-transform hover:scale-110"
+                  >
+                    <Star
+                      className={`w-12 h-12 ${
+                        star <= (hoveredRating || rating)
+                          ? 'fill-yellow-400 text-yellow-400'
+                          : 'text-gray-300'
+                      }`}
+                    />
+                  </button>
+                ))}
+              </div>
+              <p className="text-center text-sm text-gray-500 mt-2">
+                {rating === 0 && 'Click to rate'}
+                {rating === 1 && 'Poor'}
+                {rating === 2 && 'Fair'}
+                {rating === 3 && 'Good'}
+                {rating === 4 && 'Very good'}
+                {rating === 5 && 'Excellent!'}
+              </p>
+            </div>
+
+            {/* Comment */}
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-2">
+                Comment (optional)
+              </label>
+              <textarea
+                value={comment}
+                onChange={(e) => setComment(e.target.value)}
+                rows={4}
+                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500"
+                placeholder="Share your thoughts about the collaboration..."
+              />
+            </div>
+
+            {/* Would Collaborate Again */}
+            <div className="flex items-center space-x-3 p-4 bg-gray-50 rounded-lg">
+              <input
+                type="checkbox"
+                id="collaborate"
+                checked={wouldCollaborateAgain}
+                onChange={(e) => setWouldCollaborateAgain(e.target.checked)}
+                className="w-5 h-5 text-primary-600 border-gray-300 rounded focus:ring-primary-500"
+              />
+              <label htmlFor="collaborate" className="text-sm font-medium text-gray-700 cursor-pointer">
+                I would like to collaborate again
+              </label>
+            </div>
+
+            {/* Submit Button */}
+            <button
+              type="submit"
+              disabled={submitting || rating === 0}
+              className="w-full px-6 py-3 bg-primary-600 text-white rounded-md hover:bg-primary-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed font-medium"
+            >
+              {submitting ? 'Saving...' : 'Save rating'}
+            </button>
+          </form>
+        </div>
+      </div>
+    </Layout>
+  );
+};
+
+export default RatePartnerPage;