add new rating/feedback to support tab

Author: GiselleNessi

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

@@ -37,6 +37,19 @@ export function SupportCaseDetails({ ticket, team }: SupportCaseDetailsProps) {
   const [isSubmittingReply, setIsSubmittingReply] = useState(false);
   const [localMessages, setLocalMessages] = useState(ticket.messages || []);
 
+  // rating/feedback
+   const [rating, setRating] = useState(0)
+  const [feedback, setFeedback] = useState("")
+
+  const handleStarClick = (starIndex: number) => {
+    setRating(starIndex + 1)
+  }
+
+  const handleSendFeedback = () => {
+    console.log("Feedback sent:", { rating, feedback })
+    // Handle feedback submission
+  }
+
   const handleSendReply = async () => {
     if (!team.unthreadCustomerId) {
       toast.error("No unthread customer id found for this team");
@@ -152,11 +165,47 @@ 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. If you need further assistance, please
-              create a new ticket.
+              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>
+
+         {/* Feedback Input */}
+        <div className="relative p-6">
+          <div className="relative">
+            <textarea
+              value={feedback}
+              onChange={(e) => setFeedback(e.target.value)}
+              placeholder="Optional: Tell us how we can improve."
+              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
+              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"
+            >
+              Send Feedback
+            </button>
+          </div>
+        </div>
       </div>
 
       <div className="h-8" />