init migration to app router

2026-02-19 23:26:14 -05:00 · 2024-10-26 12:03:14 +03:00
parent 6f250192da
commit f207cf2439
16 changed files with 3745 additions and 2436 deletions
--- a/web/app/(todo-migrate-pages-to-app-router)/v2/page.tsx
+++ b/web/app/(todo-migrate-pages-to-app-router)/v2/page.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+export default function page() {
+  return (
+    <div>
+      v2
+    </div>
+  )
+}
--- a/web/app/customer-support/page.tsx
+++ b/web/app/customer-support/page.tsx
@@ -0,0 +1,25 @@
+import Link from 'next/link'
+import React from 'react'
+
+export default function CustomerSupportPage() {
+  return (
+    <div>
+      <div>
+        <Link
+          href='/'
+          style={{
+            margin: '5px',
+            padding: '5px',
+          }}
+        >{`<-- Go Back Home`}</Link>
+      </div>
+      <iframe
+        src='https://docs.google.com/forms/d/e/1FAIpQLScdlaaW28BdL-J0DrfKbz5TY5JvaGbbc6IVp95cptOQlq4ElQ/viewform?embedded=true'
+        width='100%'
+        height='1015'
+      >
+        Loading…
+      </iframe>
+    </div>
+  )
+}
--- a/web/app/layout.tsx
+++ b/web/app/layout.tsx
@@ -0,0 +1,12 @@
+import { PropsWithChildren } from 'react'
+import '@/styles/main.css'
+
+export default async function RootLayout({ children }: PropsWithChildren) {
+  return (
+    <html lang='en'>
+      <body>
+        <main>{children}</main>
+      </body>
+    </html>
+  )
+}
--- a/web/components.json
+++ b/web/components.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "styles/main.css",
+    "baseColor": "gray",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  }
+}
--- a/web/components/dashboard/APIKeyAndDevices.tsx
+++ b/web/components/dashboard/APIKeyAndDevices.tsx
@@ -9,18 +9,18 @@ import GenerateApiKey from './GenerateApiKey'
 export default function APIKeyAndDevices() {
  return (
    <Box backdropBlur='2xl' borderWidth='0px' borderRadius='lg'>
-      <Box maxW='xl' mx={'auto'} pt={5} px={{ base: 2, sm: 12, md: 17 }}>
-        <GenerateApiKey />
-      </Box>
      <SimpleGrid columns={{ base: 1, md: 2 }} spacing={{ base: 5, lg: 8 }}>
        <Box backdropBlur='2xl' borderWidth='0px' borderRadius='lg'>
          <ErrorBoundary>
-            <ApiKeyList />
+            <Box maxW='xl' mx={'auto'} pt={5} px={{ base: 2, sm: 4, md: 17 }}>
+              <GenerateApiKey />
+              <DeviceList />
+            </Box>
          </ErrorBoundary>
        </Box>
        <Box backdropBlur='2xl' borderWidth='0px' borderRadius='lg'>
          <ErrorBoundary>
-            <DeviceList />
+            <ApiKeyList />
          </ErrorBoundary>
        </Box>
      </SimpleGrid>
--- a/web/components/dashboard/GenerateApiKey.tsx
+++ b/web/components/dashboard/GenerateApiKey.tsx
@@ -119,7 +119,7 @@ export default function GenerateApiKey() {
    <>
      <Box
        padding={5}
-        border='1px solid gray'
+        border='1px solid #ccc'
        marginBottom={10}
        borderRadius='2xl'
      >
@@ -155,6 +155,10 @@ export default function GenerateApiKey() {
            {generatingApiKey ? 'loading... ' : 'Get Started'}
          </Button>
        </Flex>{' '}
+        <Flex>
+          Start sending SMS by clicking &quot;Get Started&quot; and scan the QR code or
+          paste the API Key in the TextBee Mobile App
+        </Flex>
      </Box>
      {generatedApiKey && (
        <>
--- a/web/components/dashboard/UserStatsCard.tsx
+++ b/web/components/dashboard/UserStatsCard.tsx
@@ -14,7 +14,7 @@ export default function UserStatsCard({ ...props }) {
      py={'3'}
      shadow={'xl'}
      border={'1px solid'}
-      borderColor={useColorModeValue('gray.800', 'gray.500')}
+      borderColor={useColorModeValue('gray.300', 'gray.700')}
      rounded={'lg'}
      style={{
        height: '90px',
--- a/web/lib/utils.ts
+++ b/web/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
--- a/web/next-env.d.ts
+++ b/web/next-env.d.ts
@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />

 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.
--- a/web/package.json
+++ b/web/package.json
@@ -13,16 +13,22 @@
    "@chakra-ui/react": "^2.8.2",
    "@emotion/react": "^11.11.3",
    "@emotion/styled": "^11.11.0",
+    "@radix-ui/react-icons": "^1.3.0",
    "@react-oauth/google": "^0.12.1",
    "@reduxjs/toolkit": "^2.0.1",
    "axios": "^1.6.5",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
    "framer-motion": "^10.18.0",
+    "lucide-react": "^0.453.0",
    "next": "14.1.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-qr-code": "^2.0.12",
    "react-redux": "^9.1.0",
-    "react-syntax-highlighter": "^15.5.0"
+    "react-syntax-highlighter": "^15.5.0",
+    "tailwind-merge": "^2.5.4",
+    "tailwindcss-animate": "^1.0.7"
  },
  "engines": {
    "node": ">=18.17.0"
@@ -33,8 +39,11 @@
    "@types/react-dom": "18.2.18",
    "@typescript-eslint/eslint-plugin": "^6.19.0",
    "@typescript-eslint/parser": "^6.19.0",
+    "autoprefixer": "^10.4.20",
    "eslint": "8.56.0",
    "eslint-config-next": "14.1.0",
+    "postcss": "^8.4.47",
+    "tailwindcss": "^3.4.14",
    "typescript": "5.3.3"
  }
 }
--- a/web/pages/_app.tsx
+++ b/web/pages/_app.tsx
@@ -1,7 +1,7 @@
 import type { AppProps } from 'next/app'
 import { Provider } from 'react-redux'
 import { store } from '../store/store'
-import { Box, ChakraProvider } from '@chakra-ui/react'
+import { Box, Button, ChakraProvider } from '@chakra-ui/react'
 import Meta from '../components/meta/Meta'
 import { GoogleOAuthProvider } from '@react-oauth/google'
 import ErrorBoundary from '../components/ErrorBoundary'
@@ -29,6 +29,25 @@ function MyApp({ Component, pageProps }: AppProps) {
            <Wrapper>
              <Component {...pageProps} />
            </Wrapper>
+
+            <div>
+              <a href='/customer-support'>
+                <Button
+                  style={{
+                    position: 'fixed',
+                    bottom: 1,
+                    right: 1,
+                    height: '80px',
+                    borderRadius: '100%',
+                    border: '1px solid red',
+                    color: 'red',
+                  }}
+                >
+                  Customer <br />
+                  Support
+                </Button>
+              </a>
+            </div>
            <Footer />
          </ChakraProvider>
        </GoogleOAuthProvider>
--- a/web/pnpm-lock.yaml
+++ b/web/pnpm-lock.yaml
--- a/web/postcss.config.js
+++ b/web/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
--- a/web/styles/main.css
+++ b/web/styles/main.css
@@ -0,0 +1,66 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 224 71.4% 4.1%;
+    --card: 0 0% 100%;
+    --card-foreground: 224 71.4% 4.1%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 224 71.4% 4.1%;
+    --primary: 220.9 39.3% 11%;
+    --primary-foreground: 210 20% 98%;
+    --secondary: 220 14.3% 95.9%;
+    --secondary-foreground: 220.9 39.3% 11%;
+    --muted: 220 14.3% 95.9%;
+    --muted-foreground: 220 8.9% 46.1%;
+    --accent: 220 14.3% 95.9%;
+    --accent-foreground: 220.9 39.3% 11%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 20% 98%;
+    --border: 220 13% 91%;
+    --input: 220 13% 91%;
+    --ring: 224 71.4% 4.1%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --radius: 0.5rem
+  }
+  .dark {
+    --background: 224 71.4% 4.1%;
+    --foreground: 210 20% 98%;
+    --card: 224 71.4% 4.1%;
+    --card-foreground: 210 20% 98%;
+    --popover: 224 71.4% 4.1%;
+    --popover-foreground: 210 20% 98%;
+    --primary: 210 20% 98%;
+    --primary-foreground: 220.9 39.3% 11%;
+    --secondary: 215 27.9% 16.9%;
+    --secondary-foreground: 210 20% 98%;
+    --muted: 215 27.9% 16.9%;
+    --muted-foreground: 217.9 10.6% 64.9%;
+    --accent: 215 27.9% 16.9%;
+    --accent-foreground: 210 20% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 20% 98%;
+    --border: 215 27.9% 16.9%;
+    --input: 215 27.9% 16.9%;
+    --ring: 216 12.2% 83.9%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%
+  }
+}
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -0,0 +1,64 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    darkMode: ["class"],
+    content: [
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+ 
+    // Or if using `src` directory:
+    "./src/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+  	extend: {
+  		borderRadius: {
+  			lg: 'var(--radius)',
+  			md: 'calc(var(--radius) - 2px)',
+  			sm: 'calc(var(--radius) - 4px)'
+  		},
+  		colors: {
+  			background: 'hsl(var(--background))',
+  			foreground: 'hsl(var(--foreground))',
+  			card: {
+  				DEFAULT: 'hsl(var(--card))',
+  				foreground: 'hsl(var(--card-foreground))'
+  			},
+  			popover: {
+  				DEFAULT: 'hsl(var(--popover))',
+  				foreground: 'hsl(var(--popover-foreground))'
+  			},
+  			primary: {
+  				DEFAULT: 'hsl(var(--primary))',
+  				foreground: 'hsl(var(--primary-foreground))'
+  			},
+  			secondary: {
+  				DEFAULT: 'hsl(var(--secondary))',
+  				foreground: 'hsl(var(--secondary-foreground))'
+  			},
+  			muted: {
+  				DEFAULT: 'hsl(var(--muted))',
+  				foreground: 'hsl(var(--muted-foreground))'
+  			},
+  			accent: {
+  				DEFAULT: 'hsl(var(--accent))',
+  				foreground: 'hsl(var(--accent-foreground))'
+  			},
+  			destructive: {
+  				DEFAULT: 'hsl(var(--destructive))',
+  				foreground: 'hsl(var(--destructive-foreground))'
+  			},
+  			border: 'hsl(var(--border))',
+  			input: 'hsl(var(--input))',
+  			ring: 'hsl(var(--ring))',
+  			chart: {
+  				'1': 'hsl(var(--chart-1))',
+  				'2': 'hsl(var(--chart-2))',
+  				'3': 'hsl(var(--chart-3))',
+  				'4': 'hsl(var(--chart-4))',
+  				'5': 'hsl(var(--chart-5))'
+  			}
+  		}
+  	}
+  },
+  plugins: [require("tailwindcss-animate")],
+}
--- a/web/tsconfig.json
+++ b/web/tsconfig.json
@@ -2,6 +2,10 @@
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./*"]
+    },
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
@@ -13,8 +17,14 @@
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
-    "incremental": true
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "strictNullChecks": false,
  },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
 }