update the UI of the admin pages based on figma and also the info ava…

client/src/App.tsx

@@ -2,7 +2,6 @@ import {
   BrowserRouter as Router,
   Routes,
   Route,
-  Navigate,
 } from "react-router-dom";
 import { ThemeProvider } from "./components/ui/theme-provider";
 import { Toaster } from "./components/ui/toaster";

client/src/components/icons/PlanIcons.tsx

@@ -1,5 +1,11 @@
 import React from "react";
 
+export const FreePlanIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path fillRule="evenodd" clipRule="evenodd" d="M15 30C23.2843 30 30 23.2843 30 15C30 6.71573 23.2843 0 15 0C6.71573 0 0 6.71573 0 15C0 23.2843 6.71573 30 15 30ZM15 9.64286C12.0413 9.64286 9.64286 12.0413 9.64286 15C9.64286 17.9587 12.0413 20.3571 15 20.3571C17.9587 20.3571 20.3571 17.9587 20.3571 15C20.3571 12.0413 17.9587 9.64286 15 9.64286Z" fill="#3057E1"/>
+  </svg>
+);
+
 export const StarterPlanIcon: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
   <svg
     width="20"

client/src/components/subscription/PlanSummary.tsx

@@ -12,7 +12,7 @@ import {
   AlertDialogTitle,
   AlertDialogTrigger,
 } from "@/components/ui/alert-dialog";
-import { X } from "lucide-react";
+
 import SpinnerShape from "@/components/SpinnerShape";
 
 interface CustomerProfile {
@@ -58,14 +58,14 @@ interface CustomerProfile {
 interface PlanSummaryProps {
   customerProfile: CustomerProfile | null;
   cancellingSubscription: boolean;
-  onContactSales: () => void;
+  onChangePlan: () => void;
   onCancelSubscription: () => void;
 }
 
 export function PlanSummary({
   customerProfile,
   cancellingSubscription,
-  onContactSales,
+  onChangePlan,
   onCancelSubscription,
 }: PlanSummaryProps) {
   const formatDate = (dateInput?: string | { $date: string }) => {
@@ -235,26 +235,14 @@ export function PlanSummary({
                 </p>
               )}
             </div>
-            <div>
-              <p className="text-muted-foreground opacity-60">Customer ID</p>
-              <p className="font-medium text-xs">
-                {customerProfile?.id || customerProfile?.currentSubscription?.customerId || "-"}
-              </p>
-            </div>
-            <div>
-              <p className="text-muted-foreground opacity-60">Account Created</p>
-              <p className="font-medium">
-                {formatDate(customerProfile?.createdAt)}
-              </p>
-            </div>
           </div>
 
           <div className="flex flex-col sm:flex-row items-start sm:items-center gap-2 mt-4 md:mt-0 self-start md:self-center">
             <Button
-              onClick={onContactSales}
+              onClick={onChangePlan}
               className="w-full sm:w-auto"
             >
-              Contact Sales
+              Change Plan
             </Button>
             {hasActiveSubscription() && (
               <AlertDialog>
@@ -270,10 +258,7 @@ export function PlanSummary({
                         Cancelling...
                       </>
                     ) : (
-                      <>
-                        <X className="h-4 w-4 mr-2" />
-                        Cancel Subscription
-                      </>
+                      "Cancel Subscription"
                     )}
                   </Button>
                 </AlertDialogTrigger>

client/src/components/subscription/PlanUpgrade.tsx

@@ -24,7 +24,7 @@ export function PlanUpgrade({ customerProfile, onUpgradePlan }: PlanUpgradeProps
   const getAvailableUpgrades = () => {
     // Prioritize currentSubscription over subscription
     const currentPlan = customerProfile?.currentSubscription?.planType?.toLowerCase() || 
-                       customerProfile?.subscription?.planType?.toLowerCase();
+    customerProfile?.subscription?.planType?.toLowerCase();
     console.log("PlanUpgrade: Current plan type for upgrades:", currentPlan);
 
     if (!currentPlan || currentPlan === 'free' || currentPlan === 'prepaid') {

client/src/pages/PaymentsPage.tsx

@@ -557,7 +557,8 @@ export function PaymentsPage() {
                 </div>
               ))
             ) : (
-              <p className="text-sm text-muted-foreground">No subscription history available</p>
+              // <p className="text-sm text-muted-foreground">No subscription history available</p>
+              <></>
             )}
           </div>
         </div>