feat: stripe integration

components/settings/subscription-plan.tsx

@@ -0,0 +1,58 @@
+import { User } from "@prisma/client"
+
+import { PricingCard } from "@/components/auth/pricing-card"
+import { Button } from "@/components/ui/button"
+import { Card } from "@/components/ui/card"
+import { PLANS } from "@/lib/stripe"
+import { formatBytes, formatNumber } from "@/lib/utils"
+import { formatDate } from "date-fns"
+import { BrainCog, CalendarSync, HardDrive } from "lucide-react"
+import Link from "next/link"
+import { Badge } from "../ui/badge"
+export function SubscriptionPlan({ user }: { user: User }) {
+  const plan = PLANS[user.membershipPlan as keyof typeof PLANS] || PLANS.unlimited
+
+  return (
+    <div className="flex flex-wrap gap-5">
+      <div className="flex flex-col gap-2 flex-1 items-center justify-center max-w-[300px]">
+        <PricingCard plan={plan} hideButton={true} />
+        <Badge variant="outline">Current Plan</Badge>
+      </div>
+      <div className="flex-1">
+        <Card className="w-full p-4">
+          <div className="space-y-2">
+            <strong className="text-lg">Usage:</strong>
+            <div className="flex items-center gap-2">
+              <HardDrive className="h-4 w-4" />
+              <span>
+                <strong className="font-semibold">Storage:</strong> {formatBytes(user.storageUsed)} /{" "}
+                {user.storageLimit > 0 ? formatBytes(user.storageLimit) : "Unlimited"}
+              </span>
+            </div>
+            <div className="flex items-center gap-2">
+              <BrainCog className="h-4 w-4" />
+              <span>
+                <strong className="font-semibold">AI Scans:</strong> {formatNumber(plan.limits.ai - user.aiBalance)} /{" "}
+                {plan.limits.ai > 0 ? formatNumber(plan.limits.ai) : "Unlimited"}
+              </span>
+            </div>
+            <div className="flex items-center gap-2">
+              <CalendarSync className="h-4 w-4" />
+              <span>
+                <strong className="font-semibold">Expiration Date:</strong>{" "}
+                {user.membershipExpiresAt ? formatDate(user.membershipExpiresAt, "yyyy-MM-dd") : "Never"}
+              </span>
+            </div>
+          </div>
+          {user.stripeCustomerId && (
+            <div className="space-y-4 mt-6">
+              <Button asChild className="w-full">
+                <Link href="/api/stripe/portal">Manage Subscription</Link>
+              </Button>
+            </div>
+          )}
+        </Card>
+      </div>
+    </div>
+  )
+}