Merge pull request #2 from yeabsra-leul/develop

fix :  financial page build issues

components.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "app/globals.css",
+    "baseColor": "gray",
+    "cssVariables": true
+  },
+  "aliases": {
+    "utils": "@/lib/utils",
+    "components": "@/components"
+  }
+}

components/component/billing-page.tsx

@@ -45,7 +45,7 @@ export function BillingPage() {
         <div className="container px-4 md:px-6 flex flex-col items-center justify-center">
           <div className="flex flex-col items-center gap-2">
             <p className="text-sm font-bold text-default-700">
-              Don`&apos;`t see your financial? We support over 14,000 financial
+              Don&apos;t see your financial? We support over 14,000 financial
               institution.{' '}
               <Dialog>
                 <DialogTrigger asChild>

components/component/recaptcha-dialog.tsx

@@ -17,7 +17,7 @@ export function RecaptchaDialog() {
       />
       <div className="flex flex-col items-center gap-6 py-4">
         <div className="text-3xl font-bold text-default-700">
-          You`&apos;`re not a robot, right?
+          You&apos;re not a robot, right?
         </div>
         <p className="text-md font-medium">
           To connect a financial, please confirm you are 100% human.

lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package.json

@@ -13,11 +13,16 @@
   "dependencies": {
     "@iconify/react": "^5.0.1",
     "@mitech/shared-components": "file:packages/shared-components",
+    "@radix-ui/react-dialog": "^1.1.1",
     "@vercel/analytics": "^1.1.1",
     "@vercel/speed-insights": "^1.0.5",
     "axios": "^1.6.5",
+    "clsx": "^2.1.1",
     "js-cookie": "^3.0.5",
+    "lucide-react": "^0.396.0",
     "react-toastify": "^10.0.5",
+    "tailwind-merge": "^2.3.0",
+    "tailwindcss-animate": "^1.0.7",
     "zod": "^3.23.7"
   },
   "prettier": {
@@ -31,15 +36,15 @@
     "@types/node": ">=20.13.0",
     "@types/react": ">=18.3.3",
     "@types/react-dom": ">=18.3.0",
+    "autoprefixer": ">=10.4.19",
     "eslint": ">=8.52.0",
     "eslint-config-next": ">=14.2.3",
     "next": ">=14.2.4",
+    "postcss": ">=8.4.38",
     "prettier": ">=3.0.3",
     "sharp": ">=0.33.2",
-    "typescript": ">=5.2.2",
     "tailwindcss": ">=3.4.3",
-    "postcss": ">=8.4.38",
-    "autoprefixer": ">=10.4.19"
+    "typescript": ">=5.2.2"
   },
   "devDependencies": {
     "@types/js-cookie": "^3.0.6"

tailwind.config.ts

@@ -1,12 +1,12 @@
 import type { Config } from 'tailwindcss';
-import {nextui} from "@nextui-org/react";
+import { nextui } from '@nextui-org/react';
 export default {
   content: [
     './app/**/*.{js,ts,jsx,tsx,mdx}',
     './components/**/*.{js,ts,jsx,tsx,mdx}',
     './pages/**/*.{js,ts,jsx,tsx,mdx}',
     './node_modules/@tremor/**/*.{js,ts,jsx,tsx,mdx}',
-    "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}"
+    './node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}'
   ],
   theme: {
     transparent: 'transparent',
@@ -63,6 +63,64 @@ export default {
         'tremor-title': ['1.125rem', { lineHeight: '1.75rem' }],
         'tremor-metric': ['1.875rem', { lineHeight: '2.25rem' }]
       }
+    },
+    colors: {
+      border: 'hsl(var(--border))',
+      input: 'hsl(var(--input))',
+      ring: 'hsl(var(--ring))',
+      background: 'hsl(var(--background))',
+      foreground: 'hsl(var(--foreground))',
+      primary: {
+        DEFAULT: 'hsl(var(--primary))',
+        foreground: 'hsl(var(--primary-foreground))'
+      },
+      secondary: {
+        DEFAULT: 'hsl(var(--secondary))',
+        foreground: 'hsl(var(--secondary-foreground))'
+      },
+      destructive: {
+        DEFAULT: 'hsl(var(--destructive))',
+        foreground: 'hsl(var(--destructive-foreground))'
+      },
+      muted: {
+        DEFAULT: 'hsl(var(--muted))',
+        foreground: 'hsl(var(--muted-foreground))'
+      },
+      accent: {
+        DEFAULT: 'hsl(var(--accent))',
+        foreground: 'hsl(var(--accent-foreground))'
+      },
+      popover: {
+        DEFAULT: 'hsl(var(--popover))',
+        foreground: 'hsl(var(--popover-foreground))'
+      },
+      card: {
+        DEFAULT: 'hsl(var(--card))',
+        foreground: 'hsl(var(--card-foreground))'
+      }
+    },
+    borderRadius: {
+      lg: 'var(--radius)',
+      md: 'calc(var(--radius) - 2px)',
+      sm: 'calc(var(--radius) - 4px)'
+    },
+    keyframes: {
+      'accordion-down': {
+        from: {
+          height: '0'
+        },
+        to: {
+          height: 'var(--radix-accordion-content-height)'
+        }
+      },
+      'accordion-up': {
+        from: {
+          height: 'var(--radix-accordion-content-height)'
+        },
+        to: {
+          height: '0'
+        }
+      }
     }
   },
   safelist: [
@@ -94,26 +152,27 @@ export default {
         /^(fill-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/
     }
   ],
-  darkMode: "class",
+  darkMode: 'class',
   plugins: [
     require('@tailwindcss/typography'),
     nextui({
-      prefix: "nextui", // prefix for themes variables
+      prefix: 'nextui', // prefix for themes variables
       addCommonColors: false, // override common colors (e.g. "blue", "green", "pink").
-      defaultTheme: "light", // default theme from the themes object
-      defaultExtendTheme: "light", // default theme to extend on custom themes
+      defaultTheme: 'light', // default theme from the themes object
+      defaultExtendTheme: 'light', // default theme to extend on custom themes
       layout: {}, // common layout tokens (applied to all themes)
       themes: {
         light: {
           layout: {}, // light theme layout tokens
-          colors: {}, // light theme colors
+          colors: {} // light theme colors
         },
         dark: {
           layout: {}, // dark theme layout tokens
-          colors: {}, // dark theme colors
-        },
+          colors: {} // dark theme colors
+        }
         // ... custom themes
-      },
+      }
     }),
+    require('tailwindcss-animate')
   ]
 } satisfies Config;