mserralta01 wikipayit .cursorrules file for TypeScript

This is a software project for a payment company. We are using Next.js, Shadcn UI, Tailwind CSS, TypeScript, and Firebase. The idea is that the frontpage can receive leads and we use the back end to manage the leads and to create a CRM. 
Then I want an apply section where the customers can provide all the important information to apply for credit card processing. 
I need you to help me write a script for the Back end Software to manage teh customers. Customers can be a lead, a merchant, . I would like a system like trello to manage the lead and ths status. With ability to send email when changing status. 
The status in a column can be Lead,Phone Calls, Offer Sent,Underwriting, Documents, Approved.
PLease tell me what other features I would want in a crm fr merchant processing.

So I am going to send you a few prompts one by one until we can complete the project together. 


# Code Completeness Rules
CODE_COMPLETENESS:
- Write the complete file content from start to finish without any placeholders or comments about previous content
- Do not use comments like "Rest of code remains the same" or "Code unchanged"
- Do not truncate any files
- Do not use placeholders
- Every file modification must be complete and self-contained
- Never use ellipsis (...) to indicate unchanged code

# UI Framework Rules
UI_COMPONENTS:
Admin Interface (Back Office):
- Use Shadcn UI components exclusively for admin interfaces
- Required Shadcn components:
  - @/components/ui/button
  - @/components/ui/input
  - @/components/ui/form
  - @/components/ui/select
  - @/components/ui/dialog
  - @/components/ui/dropdown-menu
  - @/components/ui/table
  - @/components/ui/tabs
  - @/components/ui/card
  - @/components/ui/toast
  - @/components/ui/switch
- Follow Shadcn component naming conventions
- Use Shadcn theming system for admin interface
- Maintain consistent component styling across admin panels
- Use Shadcn form handling with react-hook-form

Public Website (Front Office):
- Use custom components with Tailwind CSS
- Always make the web pages beautiful and use as much effect as possible to improve the user experience
- Implement custom designs for better brand identity
- Use custom animations and transitions
- Maintain unique visual identity separate from admin interface

# Component Documentation
DOCUMENTATION:
- Add JSDoc comments for component props
- Document component usage patterns
- Include example usage in comments
- Document any complex logic or business rules
- Add TODO comments for future improvements

# File Structure
FILE_STRUCTURE:
Admin Components:
- Place in src/components/admin/
- Use Shadcn UI components
- Follow consistent layout patterns
- Implement proper loading states
- Use proper error boundaries

Public Components:
- Place in src/components/
- Use custom Tailwind components
- Implement unique designs
- Focus on performance and accessibility
- Use proper SEO practices

# Code Generation Rules
CODE_GENERATION:
- Generate complete files without truncation
- Include all imports and exports
- Include all type definitions
- Include all necessary comments
- Include all error handling
- Include all loading states
- Never use placeholder comments

File Structure:
```
└── 📁wikipayit
    └── 📁.bolt
        └── config.json
        └── prompt
    └── 📁src
        └── 📁assets
            └── 📁models
                └── credit-card.mtl
                └── credit-card.obj
            └── 📁textures
                └── gradient.png
            └── authorize.png.webp
            └── particles.json
        └── 📁components
            └── 📁admin
                └── AdminLayout.tsx
                └── SortableSection.tsx
                └── SuperAdmin.tsx
                └── WebsiteManagement.tsx
            └── 📁auth
                └── LoginModal.tsx
            └── 📁icons
                └── AuthorizeNetLogo.tsx
            └── 📁layouts
                └── MainLayout.tsx
            └── 📁ui
                └── navigation-menu.tsx
                └── switch.tsx
            └── ACHSection.tsx
            └── Authorize.svg
            └── ChargebackSection.tsx
            └── ContactForm.tsx
            └── EntrepreneurSection.tsx
            └── Footer.tsx
            └── GatewaySection.tsx
            └── Header.tsx
            └── HeroSection.tsx
            └── HighRiskSection.tsx
            └── IndustriesSection.tsx
            └── POSSection.tsx
            └── PricingSection.tsx
            └── TestimonialCard.tsx
            └── TestimonialsSection.tsx
        └── 📁config
        └── 📁contexts
            └── AuthContext.tsx
        └── 📁hooks
            └── useToast.tsx
        └── 📁lib
            └── firebase.ts
            └── utils.ts
        └── 📁pages
            └── HomePage.tsx
            └── LoginPage.tsx
        └── 📁public
        └── 📁services
            └── websiteService.ts
        └── .DS_Store
        └── App.tsx
        └── index.css
        └── main.tsx
        └── vite-env.d.ts
    └── .cursorrules
    └── .DS_Store
    └── .env
    └── .gitignore
    └── eslint.config.js
    └── index.html
    └── package-lock.json
    └── package.json
    └── postcss.config.js
    └── robots.txt
    └── tailwind.config.js
    └── tsconfig.app.json
    └── tsconfig.json
    └── tsconfig.node.json
    └── vite.config.ts
```