6 |
8 | );
9 | }
10 |
--------------------------------------------------------------------------------
/app/(index)/layout.tsx:
--------------------------------------------------------------------------------
1 | import Navigation from '@/components/navigation';
2 | import Footer from '@/components/footer';
3 |
4 | export default function IndexLayout({ children }: Readonly<{ children: React.ReactNode }>) {
5 | return (
6 | <>
7 | Thank you for your payment!
7 |
13 |
14 | {view === 'form' ?
16 | );
17 | }
18 |
--------------------------------------------------------------------------------
/components/offline.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { PageWrapper } from './ui/layout';
4 | import { H1, P } from './ui/typography';
5 |
6 | export default function Offline() {
7 | return (
8 | 
10 |
11 | You seem to be offline.
12 | 13 |Please connect to Internet to continue using hyperbooks. We are working on bringing offline support soon.
14 |
8 |
9 | This page does exist.
10 | 11 |12 | It seems like you are lost. Let's go back{' '} 13 | 14 | home 15 | 16 | . 17 |
18 |
6 |
16 | );
17 | }
18 |
--------------------------------------------------------------------------------
/components/ui/textarea.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 |
3 | import { cn } from '@/lib/utils';
4 |
5 | const Textarea = React.forwardRef
7 |
8 |
9 |
10 |
15 |
9 |
10 | hyperbooks.
14 |
15 | {title && {title} }
16 | {description && {description} }
17 |
18 | {action}
19 |
12 |
13 |
26 |
27 | );
28 | }
29 |
--------------------------------------------------------------------------------
/components/ui/layout.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { motion } from 'motion/react';
4 | import { cn } from '@/lib/utils';
5 |
6 | function PageWrapper({ children, className }: { children: React.ReactNode; className?: string }) {
7 | return (
8 | 3 | 4 | # hyperbooks. - Smart, simple & stress-free bookkeeping. 5 | 6 | Whether you're a freelancer, business owner, or just someone trying to get your finances in order, hyperbooks makes tracking your money easy — and even enjoyable. 7 | 8 | ### Main Tech Stack 9 | 10 | 1. NextJS 15 (Full Stack framework with React 18) 11 | 2. Radix UI, Shadcn UI, Magic UI and Motion/React (Frontend) 12 | 3. HonoJS for Serverless APIs. 13 | 4. Google Firebase (Authentication, Firestore, and Cloud Storage) 14 | 5. Cloudflare Workers and Pages (REST APIs and App Hosting) 15 | 6. Paddle Billing for Subscriptions 16 | 17 | ### Upcoming Features 18 | 19 | 1. Export invoices to email-friendly HTML. (0%) 20 | 2. Rule-based AI for Intelligent suggestions. (0%) 21 | 22 |
23 | 24 | > Wish to contribute? shoot a message on hello@samadhi-gunasinghe.com or just open a pull request. 25 | -------------------------------------------------------------------------------- /components/ui/animated-shiny-text.tsx: -------------------------------------------------------------------------------- 1 | import { CSSProperties, FC, ReactNode } from 'react'; 2 | 3 | import { cn } from '@/lib/utils'; 4 | 5 | interface AnimatedShinyTextProps { 6 | children: ReactNode; 7 | className?: string; 8 | shimmerWidth?: number; 9 | } 10 | 11 | const AnimatedShinyText: FC
13 |
19 |
20 | Start Tracking Smarter — Join hyperbooks Today!
14 |It’s free to get started. What are you waiting for?
15 |
14 |
15 |
19 |
20 | );
21 | });
22 |
23 | PasswordInput.displayName = 'PasswordInput';
24 |
25 | export { PasswordInput };
26 |
--------------------------------------------------------------------------------
/components/prefixed-input.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { cn } from '@/lib/utils';
3 |
4 | interface PrefixedInputProps extends Omit
28 |
38 | );
39 | }
40 |
--------------------------------------------------------------------------------
/components/ui/tooltip.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import * as React from 'react';
4 | import * as TooltipPrimitive from '@radix-ui/react-tooltip';
5 |
6 | import { cn } from '@/lib/utils';
7 |
8 | const TooltipProvider = TooltipPrimitive.Provider;
9 |
10 | const Tooltip = TooltipPrimitive.Root;
11 |
12 | const TooltipTrigger = TooltipPrimitive.Trigger;
13 |
14 | const TooltipContent = React.forwardRef
29 |
30 |
31 |
32 |
37 |
31 |
32 | hyperbooks.
36 |Error: {error}
;
21 |
22 | const data = documents as BillData[];
23 |
24 | return (
25 | Your past expenses
28 |
14 |
15 |
33 |
34 | );
35 | }
36 |
--------------------------------------------------------------------------------
/components/ui/popover.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import * as React from 'react';
4 | import * as PopoverPrimitive from '@radix-ui/react-popover';
5 |
6 | import { cn } from '@/lib/utils';
7 |
8 | const Popover = PopoverPrimitive.Root;
9 |
10 | const PopoverTrigger = PopoverPrimitive.Trigger;
11 |
12 | const PopoverContent = React.forwardRef
16 |
21 |
22 |
32 |
23 |
25 |
26 |
28 |
29 |
31 | {user?.displayName}
30 | 31 | Welcome back to your hyperbooks dashboard. 32 |
33 |35 | We use cookies and local storage for core functionality. Learn more. 36 |
37 |{count}
28 | {outstanding > 1 ?{children}
; 12 | } 13 | 14 | function H2({ children, className }: Readonly<{ children: React.ReactNode; className?: string }>) { 15 | return{children}
; 16 | } 17 | 18 | function H3({ children, className }: Readonly<{ children: React.ReactNode; className?: string }>) { 19 | return{children}
; 20 | } 21 | 22 | function P({ children, className, variant = 'base' }: Readonly<{ children: React.ReactNode; className?: string; variant?: 'sm' | 'base' | 'lg' }>) { 23 | const variants = { 24 | sm: 'text-sm', 25 | base: 'text-base', 26 | lg: 'text-lg font-medium', 27 | }[variant]; 28 | return{children}
; 29 | } 30 | 31 | function A({ children, href, className, onClick }: Readonly<{ children: React.ReactNode; href: string; className?: string; onClick?: () => void }>) { 32 | return ( 33 |Error: {error}
;
33 |
34 | const data = documents as InvoiceData[];
35 |
36 | return (
37 | Your past income
40 |{count}
31 | {count > 1 ?Browse templatea.
18 |19 | Your preferences will be saved locally. 20 |
21 |
22 | {Object.entries(templates).map(([key, template]) => (
23 |
42 | setTemplate(key as TemplateKey)}
26 | className={`
27 | cursor-pointer border-2 rounded-lg w-full overflow-hidden
28 | ${selectedTemplate === key ? 'border-violet-500/50 bg-muted' : 'bg-background'}
29 | hover:shadow-lg transition-all`}>
30 |
40 | ))}
41 |
31 |
36 | {template.title}
32 |33 | {template.description} 34 |
35 |
37 | 
38 |
39 |
43 |
45 | You have reached the end of the list.
44 |Welcome to the other side of hyperbooks.
40 |Your have successfully subscribed to hyperbooks. Thank you for the support and enjoy the perks.
41 | 42 | ) : ( 43 | <> 44 |Your subscription has been cancelled.
45 |Your subscription has been cancelled. You can re-subscribe anytime.
46 | 47 | )} 48 |If you need any assistance contact us via,
49 |-
50 |
- 51 | hyperbooks@hyperreal.cloud 52 | 53 |
- 54 | +94 78 275 2500 55 | 56 |
{row.index + 1}
, 18 | }, 19 | { 20 | accessorKey: 'description', 21 | header: 'Description', 22 | }, 23 | { 24 | accessorKey: 'category', 25 | header: 'Category', 26 | cell: ({ row }) => { 27 | const currentCategory = expenseCategories.find((cat) => cat.value === row.original.category); 28 | return{currentCategory?.label}
; 29 | }, 30 | }, 31 | { 32 | accessorKey: 'createdAt', 33 | header: 'Created At', 34 | cell: ({ row }) => { 35 | const date = row.getValue('createdAt') as Timestamp; 36 | const formattedDate = date.toDate(); 37 | const createdAt = new Date(formattedDate); 38 | return{createdAt.toLocaleString('en-US', { month: 'long', day: 'numeric', year: 'numeric', hour: 'numeric', minute: 'numeric' })}
; 39 | }, 40 | }, 41 | { 42 | accessorKey: 'amount', 43 | header: 'Amount', 44 | cell: ({ row }) => { 45 | const amount = row.getValue('amount') as number; 46 | returnLKR {amount.toFixed(2)}
; 47 | }, 48 | }, 49 | { 50 | id: 'actions', 51 | cell: ({ row }) => { 52 | return ( 53 |
7 |
8 |
9 | ));
10 | Table.displayName = 'Table';
11 |
12 | const TableHeader = React.forwardRef
70 |
81 | );
82 | }
83 |
--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
1 | import type { Metadata } from 'next';
2 | import { Bricolage_Grotesque, Inter } from 'next/font/google';
3 | import { ThemeProvider } from '@/components/theme-provider';
4 | import { Toaster } from '@/components/ui/toaster';
5 | import './globals.css';
6 | import Splash from '@/components/splash';
7 | import CookieConsent from '@/components/cookie-consent';
8 | import Script from 'next/script';
9 |
10 | const sans = Inter({
11 | variable: '--font-sans',
12 | subsets: ['latin'],
13 | preload: true,
14 | });
15 |
16 | const display = Bricolage_Grotesque({
17 | variable: '--font-display',
18 | subsets: ['latin'],
19 | preload: true,
20 | });
21 |
22 | export const metadata: Metadata = {
23 | title: 'hyperbooks. | Smart, simple & stress-free bookkeeping.',
24 | description: 'Simplify your bookkeeping with real-time insights, secure data storage, and professional invoicing. Access your finances anytime, anywhere.',
25 | keywords: ['bookkeeping', 'income tracking', 'expense management', 'AI financial insights', 'invoice generation', 'cash flow analytics'],
26 | authors: [
27 | {
28 | name: 'Samadhi Gunasinghe',
29 | url: 'https://samadhi-gunasinghe.com',
30 | },
31 | {
32 | name: 'Nipuni Gamage',
33 | url: 'https://nipuni.is-a.dev',
34 | },
35 | {
36 | name: 'hyperreal',
37 | url: 'https://hyperreal.cloud',
38 | },
39 | ],
40 | robots: {
41 | index: true,
42 | follow: true,
43 | },
44 | appleWebApp: {
45 | capable: true,
46 | startupImage: 'https://hyperbooks.app/logo-512.png',
47 | statusBarStyle: 'black-translucent',
48 | title: 'hyperbooks. | Smart, simple & stress-free bookkeeping.',
49 | },
50 | openGraph: {
51 | title: 'hyperbooks. | Smart, simple & stress-free bookkeeping.',
52 | description: 'Simplify your bookkeeping with real-time insights, secure data storage, and professional invoicing. Access your finances anytime, anywhere.',
53 | type: 'website',
54 | url: 'https://hyperbooks.app',
55 | images: [
56 | {
57 | url: 'https://hyperbooks.app/og-image.png',
58 | width: 1200,
59 | height: 630,
60 | alt: 'Bookkeeping Dashboard Preview',
61 | },
62 | ],
63 | },
64 | twitter: {
65 | card: 'summary_large_image',
66 | title: 'hyperbooks. | Smart, simple & stress-free bookkeeping.',
67 | description: 'Simplify your bookkeeping with real-time insights, secure data storage, and professional invoicing. Access your finances anytime, anywhere.',
68 | images: ['https://hyperbooks.app/og-image.jpng'],
69 | },
70 | };
71 |
72 | export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
73 | return (
74 |
75 |
76 |
77 | {children}
71 |
28 |
83 | );
84 | }
85 |
--------------------------------------------------------------------------------
/app/dashboard/invoices/history/components/data-table.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { ColumnDef, flexRender, getCoreRowModel, getPaginationRowModel, useReactTable } from '@tanstack/react-table';
4 | import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
5 | import { ArrowDownIcon, Loader2Icon } from 'lucide-react';
6 | import { IconButton } from '@/components/ui/icon-button';
7 | import { P } from '@/components/ui/typography';
8 |
9 | interface DataTableProps
29 |
30 |
71 |
72 |
73 |
77 |
78 |
82 | 79 | {!hasMore && !loading && !billLoading && 'You have reached the end of the list.'} 80 |
81 |
28 |
83 | );
84 | }
85 |
--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
1 | import type { Config } from 'tailwindcss';
2 | import * as tailwindAnimate from 'tailwindcss-animate';
3 |
4 | export default {
5 | darkMode: ['class'],
6 | content: ['./pages/**/*.{js,ts,jsx,tsx,mdx}', './components/**/*.{js,ts,jsx,tsx,mdx}', './app/**/*.{js,ts,jsx,tsx,mdx}'],
7 | theme: {
8 | extend: {
9 | colors: {
10 | background: 'hsl(var(--background))',
11 | foreground: 'hsl(var(--foreground))',
12 | card: {
13 | DEFAULT: 'hsl(var(--card))',
14 | foreground: 'hsl(var(--card-foreground))',
15 | },
16 | popover: {
17 | DEFAULT: 'hsl(var(--popover))',
18 | foreground: 'hsl(var(--popover-foreground))',
19 | },
20 | primary: {
21 | DEFAULT: 'hsl(var(--primary))',
22 | foreground: 'hsl(var(--primary-foreground))',
23 | },
24 | secondary: {
25 | DEFAULT: 'hsl(var(--secondary))',
26 | foreground: 'hsl(var(--secondary-foreground))',
27 | },
28 | muted: {
29 | DEFAULT: 'hsl(var(--muted))',
30 | foreground: 'hsl(var(--muted-foreground))',
31 | },
32 | accent: {
33 | DEFAULT: 'hsl(var(--accent))',
34 | foreground: 'hsl(var(--accent-foreground))',
35 | },
36 | destructive: {
37 | DEFAULT: 'hsl(var(--destructive))',
38 | foreground: 'hsl(var(--destructive-foreground))',
39 | },
40 | border: 'hsl(var(--border))',
41 | input: 'hsl(var(--input))',
42 | ring: 'hsl(var(--ring))',
43 | chart: {
44 | '1': 'hsl(var(--chart-1))',
45 | '2': 'hsl(var(--chart-2))',
46 | '3': 'hsl(var(--chart-3))',
47 | '4': 'hsl(var(--chart-4))',
48 | '5': 'hsl(var(--chart-5))',
49 | },
50 | 'color-1': 'hsl(var(--color-1))',
51 | 'color-2': 'hsl(var(--color-2))',
52 | 'color-3': 'hsl(var(--color-3))',
53 | 'color-4': 'hsl(var(--color-4))',
54 | 'color-5': 'hsl(var(--color-5))',
55 | sidebar: {
56 | DEFAULT: 'hsl(var(--sidebar-background))',
57 | foreground: 'hsl(var(--sidebar-foreground))',
58 | primary: 'hsl(var(--sidebar-primary))',
59 | 'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
60 | accent: 'hsl(var(--sidebar-accent))',
61 | 'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
62 | border: 'hsl(var(--sidebar-border))',
63 | ring: 'hsl(var(--sidebar-ring))',
64 | },
65 | },
66 | borderRadius: {
67 | lg: 'var(--radius)',
68 | md: 'calc(var(--radius) - 2px)',
69 | sm: 'calc(var(--radius) - 4px)',
70 | },
71 | keyframes: {
72 | shine: {
73 | '0%': {
74 | backgroundPosition: '200% 0',
75 | },
76 | '25%': {
77 | backgroundPosition: '-200% 0',
78 | },
79 | '100%': {
80 | backgroundPosition: '-200% 0',
81 | },
82 | },
83 | rainbow: {
84 | '0%': {
85 | 'background-position': '0%',
86 | },
87 | '100%': {
88 | 'background-position': '200%',
89 | },
90 | },
91 | 'shiny-text': {
92 | '0%, 90%, 100%': {
93 | 'background-position': 'calc(-100% - var(--shiny-width)) 0',
94 | },
95 | '30%, 60%': {
96 | 'background-position': 'calc(100% + var(--shiny-width)) 0',
97 | },
98 | },
99 | },
100 | animation: {
101 | shine: 'shine 5s ease-out infinite',
102 | rainbow: 'rainbow var(--speed, 2s) infinite linear',
103 | 'shiny-text': 'shiny-text 8s infinite',
104 | },
105 | },
106 | },
107 | plugins: [tailwindAnimate],
108 | } satisfies Config;
109 |
--------------------------------------------------------------------------------
/app/dashboard/components/recent-bills.tsx:
--------------------------------------------------------------------------------
1 | import { Avatar, AvatarFallback } from '@/components/ui/avatar';
2 | import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
3 | import { Skeleton } from '@/components/ui/skeleton';
4 | import { BillData } from '@/lib/types';
5 | import { useBillPaginationStore } from '@/store/use-bill-pagination';
6 | import { useUserStore } from '@/store/use-user';
7 | import { ListRestartIcon } from 'lucide-react';
8 | import { Timestamp } from 'firebase/firestore';
9 | import { useMemo } from 'react';
10 |
11 | export default function RecentBills() {
12 | const { userData } = useUserStore();
13 | const { documents, loading } = useBillPaginationStore();
14 | const data = documents as BillData[];
15 |
16 | const memoizedData = useMemo(
17 | () =>
18 | data.slice(0, 5).map((doc) => ({
19 | ...doc,
20 | initials: doc.description
21 | .split(' ')
22 | .slice(0, 2)
23 | .map((word) => word.charAt(0).toUpperCase())
24 | .join(''),
25 | formattedDate:
26 | doc.createdAt && Timestamp.prototype.isPrototypeOf(doc.createdAt)
27 | ? doc.createdAt.toDate().toLocaleString('en-US', {
28 | year: 'numeric',
29 | month: 'short',
30 | day: 'numeric',
31 | hour: '2-digit',
32 | minute: '2-digit',
33 | hour12: true,
34 | })
35 | : 'Date not available',
36 | })),
37 | [data]
38 | );
39 |
40 | if (!memoizedData) return null;
41 |
42 | return (
43 |
29 |
30 |
71 |
72 |
73 |
77 |
78 |
82 | 79 | {!hasMore && !loading && !invoiceLoading && 'You have reached the end of the list.'} 80 |
81 |
54 |
60 | ))
61 | ) : memoizedData.length > 0 ? (
62 | memoizedData.slice(0, 5).map((doc, index) => (
63 |
56 |
59 |
64 |
65 | {doc.initials}
66 |
67 |
78 | ))
79 | ) : (
80 |
68 |
69 | {userData?.currency ?? 'USD'} {doc.amount.toFixed(2)}
70 |
71 |
74 |
75 | {userData?.currency ?? 'USD'} {doc.amount.toFixed(2)}
76 |
77 | {doc.description}
72 |{doc.formattedDate}
73 |
81 |
83 | )}
84 | Your recent bills will appear here.
82 |
55 |
61 | ))
62 | ) : data.length > 0 ? (
63 | memoizedData.map((doc, index) => (
64 |
57 |
60 |
65 |
66 | {doc.initials}
67 |
68 |
79 | ))
80 | ) : (
81 |
69 |
70 | {userData?.currency ?? 'USD'} {doc.total.toFixed(2)}
71 |
72 |
75 |
76 | {userData?.currency ?? 'USD'} {doc.total.toFixed(2)}
77 |
78 | {doc.billedTo.name}
73 |{doc.formattedDate}
74 |
82 |
84 | )}
85 | Your recent invoices will appear here.
83 |
88 |
90 | )}
91 |
69 |
70 |
71 |
75 |
76 |
77 |
106 |
107 |
108 | );
109 | }
110 |
--------------------------------------------------------------------------------
/app/dashboard/layout.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { AppSidebar } from '@/components/app-sidebar';
4 | import { ProtectedRoute } from '@/components/protected-route';
5 | import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbSeparator } from '@/components/ui/breadcrumb';
6 | import { Separator } from '@/components/ui/separator';
7 | import { SidebarInset, SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar';
8 | import { usePathname, useRouter } from 'next/navigation';
9 | import Link from 'next/link';
10 | import { Installer } from '@/components/installer';
11 | import { useAuth } from '@/hooks/use-auth';
12 | import { useFirestore } from '@/hooks/use-firestore';
13 | import { useEffect } from 'react';
14 | import { useUserStore } from '@/store/use-user';
15 | import { useProfileStore } from '@/store/use-profile';
16 | import { useAnalyticsStore } from '@/store/use-analytics';
17 | import { toast } from '@/hooks/use-toast';
18 |
19 | export default function AppLayout({ children }: { children: React.ReactNode }) {
20 | const pathname = usePathname();
21 | const path = pathname.split('/');
22 | const router = useRouter();
23 |
24 | const { user, authLoading } = useAuth();
25 | const { getUser, getProfile, getAnalytics } = useFirestore();
26 | const { userData } = useUserStore();
27 | const { profile, setProfile } = useProfileStore();
28 | const { analytics } = useAnalyticsStore();
29 |
30 | useEffect(() => {
31 | async function fetchData() {
32 | if (user?.uid) {
33 | if (!user.emailVerified) {
34 | toast({
35 | variant: 'default',
36 | title: 'Email is not verified yet.',
37 | description: 'Please check your email inbox for verification email.',
38 | });
39 | }
40 | if (!analytics) {
41 | await getAnalytics();
42 | }
43 |
44 | if (!userData) {
45 | await getUser();
46 | }
47 |
48 | if (!profile) {
49 | const profileData = await getProfile();
50 | if (profileData?.name) {
51 | setProfile(profileData);
52 | } else {
53 | router.replace('/dashboard/getting-started');
54 | }
55 | }
56 | }
57 | }
58 |
59 | fetchData();
60 | }, [user, authLoading]);
61 |
62 | return (
63 |
78 |
79 |
82 |
83 |
84 |
87 |
88 | {loading ? (
89 | <>
90 |
100 |
101 |
104 |
105 |
69 |
72 |
73 | {path.map((item, index) => (
74 |
75 |
76 |
77 |
78 | {item}
79 |
80 |
81 |
82 |
86 |
87 |
88 |
90 |
93 | 
91 |
92 |
31 | {user.displayName}
32 | {user.email}
33 |
34 |
44 |
45 | {userData?.plan?.toString() || ''}
46 |
47 |
48 |
49 |
50 | {user.displayName?.charAt(0)}
52 |
53 |
58 |
54 | {user.displayName}
55 | {user.email}
56 |
57 | 98 | {body} 99 |
100 | ); 101 | }); 102 | FormMessage.displayName = 'FormMessage'; 103 | 104 | export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField }; 105 | -------------------------------------------------------------------------------- /components/installer.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | 3 | import { useState, useEffect } from 'react'; 4 | import { Button } from './ui/button'; 5 | import { IconButton } from './ui/icon-button'; 6 | import { HardDriveDownloadIcon, Share2Icon } from 'lucide-react'; 7 | import { motion } from 'motion/react'; 8 | 9 | export function Installer() { 10 | const [deferredPrompt, setDeferredPrompt] = useState(null); 11 | const [showBanner, setShowBanner] = useState(false); 12 | const [isIOS, setIsIOS] = useState(false); 13 | const [isStandalone, setIsStandalone] = useState(false); 14 | 15 | useEffect(() => { 16 | // Check if already installed as PWA 17 | setIsStandalone(window.matchMedia('(display-mode: standalone)').matches); 18 | 19 | // Check if iOS 20 | // @ts-expect-error (window.MSStream is a property of the window object) 21 | const iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream; 22 | setIsIOS(iOS); 23 | 24 | // Don't show if user opted out 25 | const neverShow = localStorage.getItem('hyperbooks-pwa-never-show'); 26 | if (neverShow === 'true' || isStandalone) return; 27 | 28 | // For non-iOS, listen for install prompt 29 | if (!iOS) { 30 | const handler = (e: any) => { 31 | e.preventDefault(); 32 | setDeferredPrompt(e); 33 | setShowBanner(true); 34 | }; 35 | 36 | window.addEventListener('beforeinstallprompt', handler); 37 | return () => window.removeEventListener('beforeinstallprompt', handler); 38 | } else { 39 | // For iOS, check if in Safari 40 | const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent); 41 | 42 | // Only show prompt in Safari and not in standalone mode 43 | // @ts-expect-error (navigator.standalone is a property of the navigator object) 44 | if (isSafari && !navigator.standalone) { 45 | // Delay showing the prompt to avoid immediate dismissal 46 | const timer = setTimeout(() => setShowBanner(true), 1000); 47 | return () => clearTimeout(timer); 48 | } 49 | } 50 | }, []); 51 | 52 | const handleInstallClick = async () => { 53 | if (isIOS) { 54 | // Can't programmatically trigger install on iOS, just show instructions 55 | alert('To install: tap the share icon in your browser and select "Add to Home Screen"'); 56 | } else if (deferredPrompt) { 57 | // @ts-expect-error (deferredPrompt is a property of the window object) 58 | deferredPrompt.prompt(); 59 | // @ts-expect-error (deferredPrompt is a property of the window object) 60 | const { outcome } = await deferredPrompt.userChoice; 61 | 62 | if (outcome === 'accepted') { 63 | setDeferredPrompt(null); 64 | setShowBanner(false); 65 | } 66 | } 67 | }; 68 | 69 | const handleDismiss = () => { 70 | setShowBanner(false); 71 | }; 72 | 73 | const handleDontAskAgain = () => { 74 | localStorage.setItem('hyperbooks-pwa-never-show', 'true'); 75 | setShowBanner(false); 76 | }; 77 | 78 | if (!showBanner) return null; 79 | 80 | return ( 81 |
88 | {isIOS ?
91 | 92 | {isIOS 93 | ? "Add hyperbooks to your home screen for quick access. Tap the share button and select 'Add to Home Screen'." 94 | : 'Install hyperbooks on your device for quick and easy access to your bookkeeping.'} 95 |
96 |
97 |
100 |
103 |
107 |
17 | {index < 3 && (
18 |
19 | )}
20 | {index >= 3 && (
21 |
22 | )}
23 |
30 | );
31 | };
32 |
33 | const features = [
34 | {
35 | title: 'Track income & expenses in just a few taps',
36 | description: 'Log your earnings and expenses fast, intuitive, and accurately. Stay on top of your finances without the hassle.',
37 | icon: {icon}
24 |
25 |
26 |
28 | {title}
27 |{description}
29 |
69 |
74 | Stay organized, stay in control.
70 |71 | Track finances effortlessly, access records anywhere, and keep data secure. Create invoices easily and gain AI-driven insights for smarter decisions. 72 |
73 |
75 | {features.map((feature, index) => (
76 |
79 |
96 |
97 |
30 |
37 | ));
38 |
39 | CommandInput.displayName = CommandPrimitive.Input.displayName;
40 |
41 | const CommandList = React.forwardRef