diff --git a/apps/admin/src/components/ui/button.tsx b/apps/admin/src/components/ui/button.tsx index d6c7bcb..340f409 100644 --- a/apps/admin/src/components/ui/button.tsx +++ b/apps/admin/src/components/ui/button.tsx @@ -1,56 +1,23 @@ -import * as React from "react"; -import { Slot } from "@radix-ui/react-slot"; -import { cva, type VariantProps } from "class-variance-authority"; +import React from 'react' -import { cn } from "@/lib/utils"; - -const buttonVariants = cva( - "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", - { - variants: { - variant: { - default: "bg-primary text-primary-foreground hover:bg-primary/90", - destructive: - "bg-destructive text-destructive-foreground hover:bg-destructive/90", - outline: - "border border-input bg-background hover:bg-accent hover:text-accent-foreground", - secondary: - "bg-secondary text-secondary-foreground hover:bg-secondary/80", - ghost: "hover:bg-accent hover:text-accent-foreground", - link: "text-primary underline-offset-4 hover:underline", - }, - size: { - default: "h-10 px-4 py-2", - sm: "h-9 rounded-md px-3", - lg: "h-11 rounded-md px-8", - icon: "h-10 w-10", - }, - }, - defaultVariants: { - variant: "default", - size: "default", - }, - }, -); - -export interface ButtonProps - extends React.ButtonHTMLAttributes, - VariantProps { - asChild?: boolean; +interface ButtonProps extends React.ButtonHTMLAttributes { + variant?: 'primary' | 'secondary' + children: React.ReactNode } -const Button = React.forwardRef( - ({ className, variant, size, asChild = false, ...props }, ref) => { - const Comp = asChild ? Slot : "button"; - return ( - - ); - }, -); -Button.displayName = "Button"; +export function Button({ variant = 'primary', children, className = '', ...props }: ButtonProps) { + const baseClasses = 'px-4 py-2 rounded-md font-medium transition-colors' + const variantClasses = { + primary: 'bg-blue-600 text-white hover:bg-blue-700', + secondary: 'bg-gray-200 text-gray-900 hover:bg-gray-300', + } -export { Button, buttonVariants }; + return ( + + ) +} \ No newline at end of file diff --git a/apps/admin/src/components/ui/card.tsx b/apps/admin/src/components/ui/card.tsx index 59a6010..1841511 100644 --- a/apps/admin/src/components/ui/card.tsx +++ b/apps/admin/src/components/ui/card.tsx @@ -1,76 +1,30 @@ -import * as React from "react" +import React from 'react' -import { cn } from "@/lib/utils" +interface CardProps { + children: React.ReactNode + className?: string +} -const Card = React.forwardRef< - HTMLDivElement, - React.HTMLAttributes ->(({ className, ...props }, ref) => ( -
-)) -Card.displayName = "Card" +export function Card({ children, className = '' }: CardProps) { + return ( +
+ {children} +
+ ) +} -const CardHeader = React.forwardRef< - HTMLDivElement, - React.HTMLAttributes ->(({ className, ...props }, ref) => ( -
-)) -CardHeader.displayName = "CardHeader" +export function CardHeader({ children, className = '' }: CardProps) { + return ( +
+ {children} +
+ ) +} -const CardTitle = React.forwardRef< - HTMLParagraphElement, - React.HTMLAttributes ->(({ className, ...props }, ref) => ( -

-)) -CardTitle.displayName = "CardTitle" - -const CardDescription = React.forwardRef< - HTMLParagraphElement, - React.HTMLAttributes ->(({ className, ...props }, ref) => ( -

-)) -CardDescription.displayName = "CardDescription" - -const CardContent = React.forwardRef< - HTMLDivElement, - React.HTMLAttributes ->(({ className, ...props }, ref) => ( -

-)) -CardContent.displayName = "CardContent" - -const CardFooter = React.forwardRef< - HTMLDivElement, - React.HTMLAttributes ->(({ className, ...props }, ref) => ( -
-)) -CardFooter.displayName = "CardFooter" - -export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } +export function CardContent({ children, className = '' }: CardProps) { + return ( +
+ {children} +
+ ) +} \ No newline at end of file diff --git a/docs/readme.md b/docs/readme.md index 84a6de1..e55b3e3 100644 --- a/docs/readme.md +++ b/docs/readme.md @@ -1,15 +1,174 @@ -## fitai +# FitAI -# description +Integrated AI solution for fitness houses and their clients with Clerk authentication. - - fitai is integrated ai solution for fitness houses and their clients, - its allow to easy menagment of clients, tracking of payments, usage of resourcess, - attendance, habits etc. - these will be phase one: - solution is composed of a admin app, where we are doing managment tasks, we visualize and - expose importatnt data to menagment and trainers, and a expo/reactnative mobile app for users. - via app we will be tracking attendance and payments, we will be sending notification etc. +## Project Structure -# phase 2 -we will be tracking user inputs via manual input and devices, backend will analyze data and propose -excercises etc. +``` +fitai/ +├── apps/ +│ ├── admin/ # Next.js admin dashboard +│ └── mobile/ # React Native mobile app (Expo) +├── packages/ +│ └── shared/ # Shared types and utilities +└── AGENTS.md # Development guidelines +``` + +## Getting Started + +### Prerequisites +- Node.js >= 18.0.0 +- npm >= 9.0.0 +- Clerk account (sign up at https://clerk.com) + +### Installation +```bash +# Install root dependencies +npm install + +# Install admin dependencies +cd apps/admin && npm install + +# Install mobile dependencies +cd apps/mobile && npm install --legacy-peer-deps +``` + +### Authentication Setup + +FitAI uses Clerk for authentication. Follow these steps: + +1. **Create a Clerk account** at https://dashboard.clerk.com +2. **Create a new application** in the Clerk dashboard +3. **Copy your API keys** (Publishable Key and Secret Key) +4. **Configure environment variables**: + +**Admin App** (`apps/admin/.env.local`): +```env +NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_your_key_here +CLERK_SECRET_KEY=sk_test_your_key_here +``` + +**Mobile App** (`apps/mobile/.env`): +```env +EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_your_key_here +``` + +📖 **See [CLERK_SETUP.md](./CLERK_SETUP.md) for detailed setup instructions** + +### Development + +**Important**: Set up environment variables before running the apps! + +```bash +# Admin dashboard (http://localhost:3000) +cd apps/admin && npm run dev + +# Mobile app (http://localhost:8081) - Requires Expo SDK 54 +cd apps/mobile && npm start +``` + +**First-time setup checklist**: +- [ ] Create Clerk account and application +- [ ] Add API keys to `.env.local` (admin) and `.env` (mobile) +- [ ] Verify both apps start without errors +- [ ] Test sign-up and sign-in flows + +### Mobile App Setup +- **Expo SDK**: 50 (stable, compatible with Expo Go) +- **Assets**: Placeholder icons and splash screen included +- **Navigation**: Expo Router with tab-based layout +- **Authentication**: Secure storage with expo-secure-store +- **Babel**: babel-preset-expo for proper transpilation + +### Known Compatibility Notes +- Use Expo Go with SDK 50 for mobile testing +- For SDK 54, upgrade all dependencies to latest versions +- Current setup prioritizes stability over latest features + +### Build & Test +```bash +# Build all apps +npm run build + +# Run tests +npm test + +# Lint code +npm run lint + +# Type checking +npm run typecheck +``` + +## Features + +### Authentication (Clerk) +- 🔐 Secure email/password authentication +- ✉️ Email verification +- 🔄 Session management +- 🎨 Customizable UI components +- 📱 Multi-platform support (Web + Mobile) +- 🛡️ Built-in security features + +### Admin Dashboard +- 👥 User management (CRUD operations) +- 📊 Analytics dashboard with charts +- 🎯 Role-based access control +- 📈 Data visualization with AG Grid +- 💳 Payment tracking (coming soon) +- 📅 Attendance monitoring (coming soon) + +### Mobile App +- 🔐 Secure sign-in/sign-up +- 👤 User profile management +- 📱 Native mobile experience +- 🔔 Push notifications ready +- ✅ Attendance check-in (coming soon) +- 💰 Payment history (coming soon) + +## Tech Stack + +### Authentication +- **Clerk**: Complete authentication and user management platform + +### Frontend +- **Admin**: Next.js 14 (App Router), React 19, TypeScript, Tailwind CSS +- **Mobile**: React Native, Expo SDK 54, Expo Router, TypeScript + +### Backend & Database +- **Database**: SQLite with Drizzle ORM +- **API**: Next.js API Routes (REST) + +### Development Tools +- **State Management**: React Query, React Hook Form +- **Validation**: Zod schemas +- **Data Grid**: AG Grid for advanced user management +- **Charts**: AG Charts for analytics and visualization +- **Testing**: Jest, Testing Library (configured) + +## Project Structure + +``` +fitai/ +├── apps/ +│ ├── admin/ # Next.js admin dashboard +│ │ ├── src/ +│ │ │ ├── app/ # App Router pages & API routes +│ │ │ ├── components/ +│ │ │ └── lib/ # Database & utilities +│ │ └── .env.local # Admin environment variables +│ │ +│ └── mobile/ # Expo React Native app +│ ├── src/ +│ │ ├── app/ # Expo Router screens +│ │ │ ├── (auth)/ # Authentication screens +│ │ │ └── (tabs)/ # Main app tabs +│ │ └── components/ +│ └── .env # Mobile environment variables +│ +├── packages/ +│ ├── database/ # Drizzle ORM schemas & DB client +│ └── shared/ # Shared types & utilities +│ +└── CLERK_SETUP.md # Detailed authentication setup guide +``` \ No newline at end of file diff --git a/ter b/ter new file mode 100644 index 0000000..102d336 --- /dev/null +++ b/ter @@ -0,0 +1,16 @@ + + SSUUMMMMAARRYY OOFF LLEESSSS CCOOMMMMAANNDDSS + + Commands marked with * may be preceded by a number, _N. + Notes in parentheses indicate the behavior if _N is given. + A key preceded by a caret indicates the Ctrl key; thus ^K is ctrl-K. + + h H Display this help. + q :q Q :Q ZZ Exit. + --------------------------------------------------------------------------- + + MMOOVVIINNGG + + e ^E j ^N CR * Forward one line (or _N lines). + y ^Y k ^K ^P * Backward one line (or _N lines). + f ^F ^V SPACE * Forward one window (or _N lines).