From 6db257cdde1470e4d4e56988e2fa0463b2ea2abc Mon Sep 17 00:00:00 2001
From: Randy
Date: Thu, 13 Jul 2023 15:56:25 +0800
Subject: [PATCH] usage board
---
components/Layout.tsx | 177 +++++++++++++++++++-------------
config.common.ts | 11 ++
pages/api/open/approve.ts | 5 +-
service/subscription.service.ts | 7 +-
service/usage.service.ts | 7 +-
service/viewData.service.ts | 39 +++++++
6 files changed, 161 insertions(+), 85 deletions(-)
create mode 100644 config.common.ts
diff --git a/components/Layout.tsx b/components/Layout.tsx
index 67e81e0c..3c888dab 100644
--- a/components/Layout.tsx
+++ b/components/Layout.tsx
@@ -3,7 +3,7 @@ import { useMutation, useQuery } from "react-query"
import { useRouter } from "next/router"
import { AiOutlineLogout, AiOutlineSetting, AiOutlineFileText, AiOutlineAlert, AiOutlinePlus, AiOutlineComment, AiOutlineCode, AiOutlineRight, AiOutlineDown, AiOutlineFile, AiOutlineQuestion, AiOutlineQuestionCircle } from 'react-icons/ai'
import { signout, signOut } from "next-auth/client"
-import { Anchor, AppShell, Avatar, Badge, Box, Button, Code, Grid, Group, Header, List, Menu, Modal, Navbar, NavLink, Paper, ScrollArea, Select, Space, Stack, Switch, Text, TextInput, Title } from "@mantine/core"
+import { Anchor, AppShell, Avatar, Badge, Box, Button, Code, Grid, Group, Header, List, Menu, Modal, Navbar, NavLink, Paper, Progress, ScrollArea, Select, Space, Stack, Switch, Text, TextInput, Title } from "@mantine/core"
import Link from "next/link"
import type { ProjectServerSideProps } from "../pages/dashboard/project/[projectId]/settings"
import { modals } from "@mantine/modals"
@@ -14,6 +14,7 @@ import { useForm } from "react-hook-form"
import { MainLayoutData } from "../service/viewData.service"
import { Head } from "./Head"
import dayjs from "dayjs"
+import { usageLimitation } from "../config.common"
// From https://stackoverflow.com/questions/46155/how-to-validate-an-email-address-in-javascript
function validateEmail(email) {
@@ -271,6 +272,37 @@ export function MainLayout(props: {
)
}, [])
+ const usageBoard = React.useMemo(() => {
+ return (
+ <>
+
+ Usage (per month)
+
+
+
+ Sites:
+
+ {`${props.usage.projectCount} / ${usageLimitation['create_site']}`}
+
+
+
+
+ Approve comments:
+
+ {`${props.usage.approveCommentUsage} / ${usageLimitation['approve_comment']}`}
+
+
+
+ Quick Approve:
+
+ {`${props.usage.quickApproveUsage} / ${usageLimitation['quick_approve']}`}
+
+
+
+
+ )
+ }, [])
+
return (
<>
@@ -322,76 +354,79 @@ export function MainLayout(props: {
{props.config.checkout.enabled && (
-
- Subscription
-
-
- ({
- border: '1px solid #eaeaea',
- padding: theme.spacing.md
- })}>
-
-
- Free
-
-
-
- Up to 1 site
-
-
- 10 Quick Approve / month
-
-
- 100 approved comments / month
-
-
- {!props.subscription.isActived || props.subscription.status === 'cancelled' ? (
-
- ) : (
-
- )}
-
-
-
-
- ({
- border: '1px solid #eaeaea',
- padding: theme.spacing.md
- })}>
-
-
- Pro
-
-
-
- Unlimited sites
-
-
- Unlimited Quick Approve
-
-
- Unlimited approved comments
-
-
- {props.subscription.isActived ? (
- <>
-
- {props.subscription.status === 'cancelled' && (Expire on {dayjs(props.subscription.endAt).format('YYYY/MM/DD')})}
-
- ) : (
-
- )}
-
-
-
-
-
+ <>
+ {usageBoard}
+
+ Subscription
+
+
+ ({
+ border: '1px solid #eaeaea',
+ padding: theme.spacing.md
+ })}>
+
+
+ Free
+
+
+
+ Up to 1 site
+
+
+ 10 Quick Approve / month
+
+
+ 100 approved comments / month
+
+
+ {!props.subscription.isActived || props.subscription.status === 'cancelled' ? (
+
+ ) : (
+
+ )}
+
+
+
+
+ ({
+ border: '1px solid #eaeaea',
+ padding: theme.spacing.md
+ })}>
+
+
+ Pro
+
+
+
+ Unlimited sites
+
+
+ Unlimited Quick Approve
+
+
+ Unlimited approved comments
+
+
+ {props.subscription.isActived ? (
+ <>
+
+ {props.subscription.status === 'cancelled' && (Expire on {dayjs(props.subscription.endAt).format('YYYY/MM/DD')})}
+
+ ) : (
+
+ )}
+
+
+
+
+
+
)}