Fix Usage View Integration

app/layout.tsx

@@ -12,6 +12,7 @@ import { SpeedInsights } from "@vercel/speed-insights/next"
 import { Toaster } from '@/components/ui/sonner'
 import { MapToggleProvider } from '@/components/map-toggle-context'
 import { ProfileToggleProvider } from '@/components/profile-toggle-context'
+import { UsageToggleProvider } from '@/components/usage-toggle-context'
 import { CalendarToggleProvider } from '@/components/calendar-toggle-context'
 import { MapLoadingProvider } from '@/components/map-loading-context';
 import ConditionalLottie from '@/components/conditional-lottie';
@@ -72,24 +73,26 @@ export default function RootLayout({
         <CalendarToggleProvider>
           <MapToggleProvider>
             <ProfileToggleProvider>
-              <ThemeProvider
-                attribute="class"
-              defaultTheme="earth"
-              enableSystem
-              disableTransitionOnChange
-              themes={['light', 'dark', 'earth']}
-            >
-              <MapContextProvider>
-                <MapLoadingProvider>
-                  <Header />
-                  <ConditionalLottie />
-                  {children}
-                  <Sidebar />
-                  <Footer />
-                  <Toaster />
-                </MapLoadingProvider>
-              </MapContextProvider>
-            </ThemeProvider>
+              <UsageToggleProvider>
+                <ThemeProvider
+                  attribute="class"
+                defaultTheme="earth"
+                enableSystem
+                disableTransitionOnChange
+                themes={['light', 'dark', 'earth']}
+              >
+                <MapContextProvider>
+                  <MapLoadingProvider>
+                    <Header />
+                    <ConditionalLottie />
+                    {children}
+                    <Sidebar />
+                    <Footer />
+                    <Toaster />
+                  </MapLoadingProvider>
+                </MapContextProvider>
+              </ThemeProvider>
+            </UsageToggleProvider>
           </ProfileToggleProvider>
         </MapToggleProvider>
         </CalendarToggleProvider>

components/chat.tsx

@@ -14,7 +14,9 @@ import { MapProvider } from './map/map-provider'
 import { useUIState, useAIState } from 'ai/rsc'
 import MobileIconsBar from './mobile-icons-bar'
 import { useProfileToggle, ProfileToggleEnum } from "@/components/profile-toggle-context";
+import { useUsageToggle } from "@/components/usage-toggle-context";
 import SettingsView from "@/components/settings/settings-view";
+import { UsageView } from "@/components/usage-view";
 import { MapDataProvider, useMapData } from './map/map-data-context'; // Add this and useMapData
 import { updateDrawingContext } from '@/lib/actions/chat'; // Import the server action
 import dynamic from 'next/dynamic'
@@ -31,6 +33,7 @@ export function Chat({ id }: ChatProps) {
   const [aiState] = useAIState()
   const [isMobile, setIsMobile] = useState(false)
   const { activeView } = useProfileToggle();
+  const { isUsageOpen } = useUsageToggle();
   const { isCalendarOpen } = useCalendarToggle()
   const [input, setInput] = useState('')
   const [showEmptyScreen, setShowEmptyScreen] = useState(false)
@@ -107,7 +110,7 @@ export function Chat({ id }: ChatProps) {
         <HeaderSearchButton />
         <div className="mobile-layout-container">
           <div className="mobile-map-section">
-          {activeView ? <SettingsView /> : <MapProvider />}
+          {isUsageOpen ? <UsageView /> : activeView ? <SettingsView /> : <MapProvider />}
         </div>
         <div className="mobile-icons-bar">
           <MobileIconsBar onAttachmentClick={handleAttachment} onSubmitClick={handleMobileSubmit} />
@@ -218,7 +221,7 @@ export function Chat({ id }: ChatProps) {
           className="w-1/2 p-4 fixed h-[calc(100vh-0.5in)] top-0 right-0 mt-[0.5in]"
           style={{ zIndex: 10 }} // Added z-index
         >
-          {activeView ? <SettingsView /> : <MapProvider />}
+          {isUsageOpen ? <UsageView /> : activeView ? <SettingsView /> : <MapProvider />}
         </div>
       </div>
     </MapDataProvider>

components/header.tsx

@@ -15,10 +15,23 @@ import {
 } from 'lucide-react'
 import { MapToggle } from './map-toggle'
 import { ProfileToggle } from './profile-toggle'
+import { PurchaseCreditsPopup } from './purchase-credits-popup'
+import { useUsageToggle } from './usage-toggle-context'
+import { useState, useEffect } from 'react'
 
 export const Header = () => {
   const { toggleCalendar } = useCalendarToggle()
+  const [isPurchaseOpen, setIsPurchaseOpen] = useState(false)
+  const { toggleUsage } = useUsageToggle()
+
+  useEffect(() => {
+    // Open payment popup as soon as application opens
+    setIsPurchaseOpen(true)
+  }, [])
+
   return (
+    <>
+      <PurchaseCreditsPopup isOpen={isPurchaseOpen} onClose={() => setIsPurchaseOpen(false)} />
     <header className="fixed w-full p-1 md:p-2 flex justify-between items-center z-20 backdrop-blur bg-background/95 border-b border-border/40">
       <div>
         <a href="/">
@@ -53,11 +66,9 @@ export const Header = () => {
 
         <div id="header-search-portal" />
 
-        <a href="https://buy.stripe.com/3cIaEX3tRcur9EM7tbasg00" target="_blank" rel="noopener noreferrer">
-          <Button variant="ghost" size="icon">
-            <TentTree className="h-[1.2rem] w-[1.2rem]" />
-          </Button>
-        </a>
+        <Button variant="ghost" size="icon" onClick={toggleUsage}>
+          <TentTree className="h-[1.2rem] w-[1.2rem]" />
+        </Button>
 
         <ModeToggle />
 
@@ -67,15 +78,14 @@ export const Header = () => {
       {/* Mobile menu buttons */}
       <div className="flex md:hidden gap-2">
 
-        <a href="https://buy.stripe.com/3cIaEX3tRcur9EM7tbasg00" target="_blank" rel="noopener noreferrer">
-          <Button variant="ghost" size="icon">
-            <TentTree className="h-[1.2rem] w-[1.2rem]" />
-          </Button>
-        </a>
+        <Button variant="ghost" size="icon" onClick={toggleUsage}>
+          <TentTree className="h-[1.2rem] w-[1.2rem]" />
+        </Button>
         <ProfileToggle/>
       </div>
     </header>
+    </>
   )
 }
 
-export default Header
+export default Header

components/purchase-credits-popup.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+import React from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { CreditCard, Zap } from 'lucide-react';
+
+interface PurchaseCreditsPopupProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function PurchaseCreditsPopup({ isOpen, onClose }: PurchaseCreditsPopupProps) {
+  const handlePurchase = () => {
+    window.open('https://buy.stripe.com/3cIaEX3tRcur9EM7tbasg00', '_blank');
+    onClose();
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Zap className="text-yellow-500" />
+            Upgrade Your Plan
+          </DialogTitle>
+          <DialogDescription>
+            You&apos;ve reached your credit limit. Upgrade now to continue using all features seamlessly.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-4 py-4">
+          <div className="flex items-center justify-between p-4 border rounded-lg bg-muted/50">
+            <div>
+              <p className="font-medium">Standard Tier</p>
+              <p className="text-sm text-muted-foreground">Unlimited searches & more</p>
+            </div>
+            <p className="font-bold">$20/mo</p>
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={onClose}>Later</Button>
+          <Button onClick={handlePurchase} className="gap-2">
+            <CreditCard size={16} />
+            Pay Now
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

components/sidebar/chat-history-client.tsx

@@ -18,6 +18,7 @@ import {
 } from '@/components/ui/alert-dialog';
 import { toast } from 'sonner';
 import { Spinner } from '@/components/ui/spinner';
+import { Zap, ChevronDown, ChevronUp } from 'lucide-react';
 import HistoryItem from '@/components/history-item'; // Adjust path if HistoryItem is moved or renamed
 import type { Chat as DrizzleChat } from '@/lib/actions/chat-db'; // Use the Drizzle-based Chat type
 
@@ -31,6 +32,7 @@ export function ChatHistoryClient({}: ChatHistoryClientProps) {
   const [error, setError] = useState<string | null>(null);
   const [isClearPending, startClearTransition] = useTransition();
   const [isAlertDialogOpen, setIsAlertDialogOpen] = useState(false);
+  const [isCreditsVisible, setIsCreditsVisible] = useState(false);
   const router = useRouter();
 
   useEffect(() => {
@@ -113,6 +115,34 @@ export function ChatHistoryClient({}: ChatHistoryClientProps) {
 
   return (
     <div className="flex flex-col flex-1 space-y-3 h-full">
+      <div className="px-2">
+        <Button
+          variant="ghost"
+          size="sm"
+          className="w-full flex items-center justify-between text-muted-foreground hover:text-foreground"
+          onClick={() => setIsCreditsVisible(!isCreditsVisible)}
+        >
+          <div className="flex items-center gap-2">
+            <Zap size={14} className="text-yellow-500" />
+            <span className="text-xs font-medium">Credits Preview</span>
+          </div>
+          {isCreditsVisible ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
+        </Button>
+
+        {isCreditsVisible && (
+          <div className="mt-2 p-3 rounded-lg bg-muted/50 border border-border/50 space-y-2">
+            <div className="flex justify-between items-center text-xs">
+              <span>Available Credits</span>
+              <span className="font-bold">0</span>
+            </div>
+            <div className="w-full bg-secondary h-1.5 rounded-full overflow-hidden">
+              <div className="bg-yellow-500 h-full w-[0%]" />
+            </div>
+            <p className="text-[10px] text-muted-foreground">Upgrade to get more credits</p>
+          </div>
+        )}
+      </div>
+
       <div className="flex flex-col gap-2 flex-1 overflow-y-auto">
         {!chats?.length ? (
           <div className="text-foreground/30 text-sm text-center py-4">

components/usage-toggle-context.tsx

@@ -0,0 +1,28 @@
+'use client'
+
+import { createContext, useContext, useState, ReactNode } from "react"
+
+interface UsageToggleContextType {
+  isUsageOpen: boolean
+  toggleUsage: () => void
+}
+
+const UsageToggleContext = createContext<UsageToggleContextType | undefined>(undefined)
+
+export const UsageToggleProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+  const [isUsageOpen, setIsUsageOpen] = useState(false)
+
+  const toggleUsage = () => setIsUsageOpen(prev => !prev)
+
+  return (
+    <UsageToggleContext.Provider value={{ isUsageOpen, toggleUsage }}>
+      {children}
+    </UsageToggleContext.Provider>
+  )
+}
+
+export const useUsageToggle = () => {
+  const context = useContext(UsageToggleContext)
+  if (!context) throw new Error('useUsageToggle must be used within UsageToggleProvider')
+  return context
+}

components/usage-view.tsx

@@ -0,0 +1,96 @@
+'use client'
+
+import React, { useEffect, useState } from 'react'
+import { Button } from '@/components/ui/button'
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
+import { Zap, RefreshCw, LayoutPanelLeft, Minus } from 'lucide-react'
+import { useUsageToggle } from './usage-toggle-context'
+
+export function UsageView() {
+  const [usage] = useState([
+    { details: 'Efficiently Fix Pull Request ...', date: '2026-01-17 08:05', change: -418 },
+    { details: 'Fix Build and Add Parallel S...', date: '2026-01-16 06:10', change: -482 },
+    { details: 'How to Add a Feature to a ...', date: '2026-01-14 10:42', change: -300 },
+  ])
+  const [credits] = useState(0)
+  const { toggleUsage } = useUsageToggle()
+
+  return (
+    <div className="container py-8 h-full overflow-y-auto">
+      <div className="flex justify-between items-center mb-8">
+        <div>
+          <h1 className="text-3xl font-bold tracking-tight">Usage</h1>
+          <p className="text-muted-foreground">Track your credits and usage history</p>
+        </div>
+        <Button variant="ghost" size="icon" onClick={toggleUsage}>
+          <Minus className="h-6 w-6" />
+          <span className="sr-only">Close usage</span>
+        </Button>
+      </div>
+
+      <div className="space-y-6">
+        <div className="p-4 border rounded-xl space-y-4">
+          <div className="flex justify-between items-center">
+            <span className="italic font-medium text-lg">Free</span>
+            <Button size="sm" className="rounded-full px-4" onClick={() => window.open('https://buy.stripe.com/3cIaEX3tRcur9EM7tbasg00', '_blank')}>
+              Upgrade
+            </Button>
+          </div>
+
+          <div className="space-y-2">
+            <div className="flex items-center justify-between text-sm">
+              <div className="flex items-center gap-2">
+                <Zap size={16} className="text-muted-foreground" />
+                <span>Credits</span>
+              </div>
+              <span className="font-bold">{credits}</span>
+            </div>
+            <div className="flex items-center justify-between text-xs text-muted-foreground pl-6">
+              <span>Free credits</span>
+              <span>0</span>
+            </div>
+          </div>
+
+          <div className="space-y-1">
+            <div className="flex items-center justify-between text-sm">
+              <div className="flex items-center gap-2">
+                <RefreshCw size={16} className="text-muted-foreground" />
+                <span>Daily refresh credits</span>
+              </div>
+              <span className="font-bold">300</span>
+            </div>
+            <p className="text-[10px] text-muted-foreground pl-6">Refresh to 300 at 00:00 every day</p>
+          </div>
+        </div>
+
+        <div className="space-y-4">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <LayoutPanelLeft size={18} />
+              <span className="font-medium">Website usage & billing</span>
+            </div>
+          </div>
+
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead className="text-xs">Details</TableHead>
+                <TableHead className="text-xs">Date</TableHead>
+                <TableHead className="text-xs text-right">Credits change</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {usage.map((item, i) => (
+                <TableRow key={i}>
+                  <TableCell className="text-xs font-medium">{item.details}</TableCell>
+                  <TableCell className="text-[10px] text-muted-foreground">{item.date}</TableCell>
+                  <TableCell className="text-xs text-right font-medium">{item.change}</TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      </div>
+    </div>
+  )
+}