Chameleon

Feedback System

User feedback and rating system

Feedback System

Chameleon includes a user feedback system for collecting ratings and comments from users.

Overview

The feedback system allows users to submit ratings (1-5 stars) and comments about their experience. Admins can view and manage feedback through the admin interface. The system stores user feedback with timestamps and user information for analysis and improvement.

User Interface

Submit Feedback

Users can submit feedback through the feedback form:

  1. Navigate to the feedback page
  2. Select a rating (1-5 stars)
  3. Enter comments (optional)
  4. Submit feedback

Feedback Display

Feedback is displayed with:

  • User avatar and name
  • Star rating
  • Comment text
  • Submission date
  • User profile link

Admin Interface

View Feedback

Location: /admin/feedbacks

Features:

  • View all user feedback
  • Filter by rating
  • Search feedback content
  • View user details

Feedback Management

Actions available:

  • View individual feedback
  • See user profile
  • Export feedback data
  • Respond to feedback (manual process)

Usage

Submit Feedback

// Feedback submission
const submitFeedback = async (rating: number, comment: string) => {
  const response = await fetch("/api/feedback", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      rating,
      comment,
    }),
  });
  
  return response.json();
};

Display Feedback

// src/components/feedback/feedback-list.tsx
import { getFeedbacks } from "@/models/feedback";

export default async function FeedbackList() {
  const feedbacks = await getFeedbacks();
  
  return (
    <div>
      {feedbacks.map(feedback => (
        <div key={feedback.id} className="feedback-item">
          <div className="rating">
            {Array.from({ length: 5 }).map((_, i) => (
              <Star key={i} filled={i < feedback.rating} />
            ))}
          </div>
          <p>{feedback.comment}</p>
          <span>{feedback.user.nickname} - {feedback.created_at}</span>
        </div>
      ))}
    </div>
  );
}

Admin Feedback View

// src/app/[locale]/(admin)/admin/feedbacks/page.tsx
import { getFeedbacks } from "@/models/feedback";

export default async function AdminFeedbacksPage() {
  const feedbacks = await getFeedbacks();
  
  return (
    <div>
      <h1>User Feedback</h1>
      <table>
        <thead>
          <tr>
            <th>User</th>
            <th>Rating</th>
            <th>Comment</th>
            <th>Date</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          {feedbacks.map(feedback => (
            <tr key={feedback.id}>
              <td>
                <img src={feedback.user.avatar_url} alt={feedback.user.nickname} />
                {feedback.user.nickname}
              </td>
              <td>{feedback.rating}/5</td>
              <td>{feedback.comment}</td>
              <td>{feedback.created_at}</td>
              <td>
                <Link href={`/admin/users/${feedback.user.uuid}`}>
                  View User
                </Link>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

File Locations

  • src/models/feedback.ts - Feedback data model
  • src/services/feedback.ts - Feedback business logic
  • src/app/api/feedback/route.ts - Feedback API endpoint
  • src/app/[locale]/(admin)/admin/feedbacks/page.tsx - Admin feedback page
  • src/components/feedback/ - Feedback UI components

Common Tasks

View All Feedback

  1. Sign in as admin
  2. Go to /admin/feedbacks
  3. Browse feedback list
  4. Click on user to view profile

Filter Feedback

  • Filter by rating (1-5 stars)
  • Search by comment content
  • Sort by date (newest first)

Export Feedback Data

-- Export feedback data
SELECT 
  u.nickname,
  u.email,
  f.rating,
  f.comment,
  f.created_at
FROM feedbacks f
JOIN users u ON f.user_uuid = u.uuid
ORDER BY f.created_at DESC;

Respond to Feedback

Currently manual process:

  1. Note user email from feedback
  2. Contact user directly
  3. Update system based on feedback

Troubleshooting

Feedback not submitting

Problem: User can't submit feedback

Solution:

  1. Check user is authenticated
  2. Verify API endpoint is working
  3. Check database connection
  4. Validate rating is between 1-5

Admin can't view feedback

Problem: Admin page shows no feedback

Solution:

  1. Verify admin access permissions
  2. Check database has feedback records
  3. Verify feedback query is working
  4. Check for JavaScript errors

Feedback not displaying

Problem: Feedback not showing on public pages

Solution:

  1. Check feedback query filters
  2. Verify feedback status is "active"
  3. Check component rendering
  4. Verify database records exist

Next Steps