add supabase table and set up

Author: GiselleNessi

.vscode/settings.json

@@ -15,7 +15,7 @@
     "editor.defaultFormatter": "biomejs.biome"
   },
   "[typescriptreact]": {
-    "editor.defaultFormatter": "biomejs.biome"
+    "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
   },
   "editor.codeActionsOnSave": {
     "quickfix.biome": "explicit",

apps/dashboard/FEEDBACK_FEATURE.md

@@ -0,0 +1,63 @@
+# Support Feedback Feature
+
+## Overview
+
+Added a feedback collection system to support tickets that allows users to rate their experience and provide optional comments when tickets are closed.
+
+## Features
+
+- **Star Rating System**: 1-5 star rating with visual feedback
+- **Text Feedback**: Optional text input for detailed comments
+- **Automatic Display**: Feedback form appears when support tickets are closed
+- **Data Storage**: Feedback is stored in Supabase database
+- **Success Feedback**: Toast notifications and form reset after submission
+
+## Implementation
+
+### Database
+
+- **Table**: `support_feedback`
+- **Columns**:
+  - `id` (UUID, Primary Key)
+  - `created_at` (Timestamp, auto-generated)
+  - `rating` (Integer, 1-5)
+  - `feedback` (Text, optional)
+
+### Files Added/Modified
+
+- `src/@/lib/supabase.ts` - Supabase client configuration
+- `src/app/(app)/team/[team_slug]/(team)/~/support/apis/feedback.ts` - Feedback submission API
+- `src/app/(app)/team/[team_slug]/(team)/~/support/_components/SupportCaseDetails.tsx` - Updated with feedback form
+
+### Dependencies
+
+- `@supabase/supabase-js` - Added for database operations
+
+## Environment Variables Required
+
+```bash
+NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
+NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
+```
+
+## Usage
+
+1. Navigate to a closed support ticket
+2. The feedback form will appear at the bottom
+3. Rate the experience (1-5 stars)
+4. Add optional text feedback
+5. Click "Send Feedback"
+6. Data is saved to Supabase and form resets
+
+## Database Setup
+
+Run this SQL in your Supabase SQL Editor:
+
+```sql
+CREATE TABLE support_feedback (
+  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
+  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
+  rating INTEGER NOT NULL,
+  feedback TEXT
+);
+```

apps/dashboard/package.json

@@ -22,6 +22,7 @@
     "@scalar/api-reference-react": "0.7.25",
     "@sentry/nextjs": "9.34.0",
     "@shazow/whatsabi": "0.22.2",
+    "@supabase/supabase-js": "^2.55.0",
     "@tanstack/react-query": "5.81.5",
     "@tanstack/react-table": "^8.21.3",
     "@thirdweb-dev/service-utils": "workspace:*",

apps/dashboard/public/robots.txt

@@ -1,6 +1,6 @@
 # *
 User-agent: *
-Allow: /
+Disallow: /
 
 # Host
 Host: https://thirdweb.com

apps/dashboard/src/@/lib/supabase.ts

@@ -0,0 +1,19 @@
+import { createClient } from "@supabase/supabase-js";
+
+const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
+const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
+
+// Only create client if environment variables are available
+export const supabase =
+  supabaseUrl && supabaseAnonKey
+    ? createClient(supabaseUrl, supabaseAnonKey)
+    : null;
+
+// Log the status for debugging
+if (process.env.NODE_ENV === "development") {
+  console.log("🔧 Supabase client status:", {
+    hasUrl: !!supabaseUrl,
+    hasKey: !!supabaseAnonKey,
+    clientCreated: !!supabase,
+  });
+}

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/_components/SupportCaseDetails.tsx

@@ -20,6 +20,7 @@ import { Spinner } from "@/components/ui/Spinner/Spinner";
 import { AutoResizeTextarea } from "@/components/ui/textarea";
 import { cn } from "@/lib/utils";
 import { ThirdwebMiniLogo } from "../../../../../../components/ThirdwebMiniLogo";
+import { submitSupportFeedback } from "../apis/feedback";
 import { sendMessageToTicket } from "../apis/support";
 import type { SupportMessage, SupportTicket } from "../types/tickets";
 import {
@@ -38,17 +39,37 @@ export function SupportCaseDetails({ ticket, team }: SupportCaseDetailsProps) {
   const [localMessages, setLocalMessages] = useState(ticket.messages || []);
 
   // rating/feedback
-   const [rating, setRating] = useState(0)
-  const [feedback, setFeedback] = useState("")
+  const [rating, setRating] = useState(0);
+  const [feedback, setFeedback] = useState("");
 
   const handleStarClick = (starIndex: number) => {
-    setRating(starIndex + 1)
-  }
+    setRating(starIndex + 1);
+  };
+
+  const handleSendFeedback = async () => {
+    if (rating === 0) {
+      toast.error("Please select a rating");
+      return;
+    }
+
+    try {
+      const result = await submitSupportFeedback({
+        rating,
+        feedback,
+      });
 
-  const handleSendFeedback = () => {
-    console.log("Feedback sent:", { rating, feedback })
-    // Handle feedback submission
-  }
+      if ("error" in result) {
+        throw new Error(result.error);
+      }
+
+      toast.success("Thank you for your feedback!");
+      setRating(0);
+      setFeedback("");
+    } catch (error) {
+      console.error("Failed to submit feedback:", error);
+      toast.error("Failed to submit feedback. Please try again.");
+    }
+  };
 
   const handleSendReply = async () => {
     if (!team.unthreadCustomerId) {
@@ -165,31 +186,38 @@ export function SupportCaseDetails({ ticket, team }: SupportCaseDetailsProps) {
         {ticket.status === "closed" && (
           <div className="border-t p-6">
             <p className="text-muted-foreground text-sm">
-              This ticket is closed. Give us a quick rating to let us know how we did!
+              This ticket is closed. Give us a quick rating to let us know how
+              we did!
             </p>
           </div>
         )}
 
-         <div className="flex gap-2 mb-6 px-6">
-            {[...Array(5)].map((_, index) => (
-              <button key={index} onClick={() => handleStarClick(index)} className="transition-colors">
-                <svg
-                  width="32"
-                  height="32"
-                  viewBox="0 0 24 24"
-                  fill={index < rating ? "#ff00aa" : "none"}
-                  stroke={index < rating ? "#ff00aa" : "#666"}
-                  strokeWidth={index < rating ? "2" : "1"}
-                  className="hover:fill-pink-500 hover:stroke-pink-500 rounded-sm"
-                  rx="2"
-                >
-                  <polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26" />
-                </svg>
-              </button>
-            ))}
-          </div>
+        <div className="flex gap-2 mb-6 px-6">
+          {[1, 2, 3, 4, 5].map((starValue) => (
+            <button
+              key={`star-${starValue}`}
+              type="button"
+              onClick={() => handleStarClick(starValue - 1)}
+              className="transition-colors"
+              aria-label={`Rate ${starValue} out of 5 stars`}
+            >
+              <svg
+                width="32"
+                height="32"
+                viewBox="0 0 24 24"
+                fill={starValue <= rating ? "#ff00aa" : "none"}
+                stroke={starValue <= rating ? "#ff00aa" : "#666"}
+                strokeWidth={starValue <= rating ? "2" : "1"}
+                className="hover:fill-pink-500 hover:stroke-pink-500 rounded-sm"
+                rx="2"
+                aria-hidden="true"
+              >
+                <polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26" />
+              </svg>
+            </button>
+          ))}
+        </div>
 
-         {/* Feedback Input */}
         <div className="relative p-6">
           <div className="relative">
             <textarea
@@ -199,6 +227,7 @@ export function SupportCaseDetails({ ticket, team }: SupportCaseDetailsProps) {
               className="text-muted-foreground text-sm w-full bg-black text-white rounded-lg p-4 pr-28 min-h-[100px] resize-none border border-[#262626] focus:border-[#262626] focus:outline-none placeholder-[#A1A1A1]"
             />
             <button
+              type="button"
               onClick={handleSendFeedback}
               className="absolute mb-2 bottom-3 right-3 bg-white text-black px-4 py-2 rounded-full text-sm font-medium hover:bg-gray-100 transition-colors"
             >

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/support/apis/feedback.ts

@@ -0,0 +1,53 @@
+"use server";
+
+import { supabase } from "@/lib/supabase";
+
+interface FeedbackData {
+  rating: number;
+  feedback: string;
+}
+
+export async function submitSupportFeedback(
+  data: FeedbackData,
+): Promise<{ success: true } | { error: string }> {
+  try {
+    console.log("🔍 Debug - Feedback submission attempt:", {
+      hasSupabase: !!supabase,
+      data: data,
+    });
+
+    if (!supabase) {
+      throw new Error(
+        "Supabase client not initialized. Please check your environment variables.",
+      );
+    }
+
+    // Test the connection first
+    const { data: testData, error: testError } = await supabase
+      .from("support_feedback")
+      .select("id")
+      .limit(1);
+
+    console.log("🔍 Debug - Supabase connection test:", {
+      testData,
+      testError,
+    });
+
+    const { error } = await supabase.from("support_feedback").insert({
+      rating: data.rating,
+      feedback: data.feedback,
+    });
+
+    if (error) {
+      console.error("Supabase error:", error);
+      return { error: `Failed to submit feedback: ${error.message}` };
+    }
+
+    return { success: true };
+  } catch (error) {
+    console.error("Feedback submission error:", error);
+    return {
+      error: `Failed to submit feedback: ${error instanceof Error ? error.message : "Unknown error"}`,
+    };
+  }
+}