ntc-dev-kit 1.0.0__py3-none-any.whl

ntc/templates/react_admin/main.py

@@ -0,0 +1,208 @@
+import os
+import subprocess
+import sys
+import json
+import shutil
+from colorama import Fore, Style
+from ntc.utils.output import print_success, print_error, print_warning, print_info
+
+def replace_variables(content, variables):
+    """Replace placeholders with actual variables."""
+    for key, value in variables.items():
+        content = content.replace(f"{{{key}}}", value)
+    return content
+
+def get_template_content(template_name, variables):
+    """Load template content and replace variables."""
+    if template_name.startswith("react_admin/"):
+        template_name = template_name[len("react_admin/"):]
+    
+    template_path = os.path.join(os.path.dirname(__file__), template_name)
+    if not os.path.exists(template_path):
+        return ""
+    with open(template_path, "r", encoding="utf-8") as f:
+        content = f.read()
+    return replace_variables(content, variables)
+
+def create_from_json(base_path, structure, variables):
+    """Recursively create directories and files from JSON."""
+    for name, content in structure.items():
+        name = replace_variables(name, variables)
+        full_path = os.path.join(base_path, name)
+
+        if isinstance(content, dict):
+            if "template" in content:
+                os.makedirs(os.path.dirname(full_path), exist_ok=True)
+                with open(full_path, "w", encoding="utf-8") as f:
+                    f.write(get_template_content(content["template"], variables))
+            else:
+                os.makedirs(full_path, exist_ok=True)
+                create_from_json(full_path, content, variables)
+        else:
+            os.makedirs(os.path.dirname(full_path), exist_ok=True)
+            with open(full_path, "w", encoding="utf-8") as f:
+                f.write(replace_variables(content or "", variables))
+
+def install_npm_dependencies(project_root):
+    """Install npm dependencies for React admin project."""
+    print_info("Installing npm dependencies...")
+    
+    if not shutil.which("npm"):
+        print_error("npm not found. Please install Node.js and npm first.")
+        print_info("Visit https://nodejs.org/ to download Node.js")
+        return False
+    
+    try:
+        result = subprocess.run(
+            ["npm", "install"],
+            cwd=project_root,
+            check=True,
+            capture_output=True,
+            text=True
+        )
+        print_success("npm dependencies installed successfully!")
+        return True
+    except subprocess.CalledProcessError as e:
+        print_error(f"Failed to install npm dependencies: {e}")
+        print_info("You can manually run 'npm install' in the project directory later.")
+        return False
+
+def init_react_admin_project(base_path, project_name):
+    """Initialize React admin dashboard project structure and setup environment."""
+    structure_file = os.path.join(os.path.dirname(__file__), "structure.json")
+
+    if not os.path.exists(structure_file):
+        print_error(f"Structure file not found: {structure_file}")
+        return
+
+    with open(structure_file, "r", encoding="utf-8") as f:
+        structure = json.load(f)
+
+    project_root = os.path.join(base_path, project_name)
+    os.makedirs(project_root, exist_ok=True)
+
+    variables = {
+        "project_name": project_name,
+    }
+
+    create_from_json(project_root, structure["{project_name}"], variables)
+    print_success(f"React admin dashboard '{project_name}' initialized at: {project_root}")
+
+    # Ask user for dependency installation
+    print(f"\n{Fore.CYAN}{Style.BRIGHT}📦 NODE.JS DEPENDENCY SETUP{Style.RESET_ALL}")
+    print("─" * 40)
+    print(f"{Fore.YELLOW}{Style.BRIGHT}[1]{Style.RESET_ALL} {Fore.WHITE}Install dependencies now (npm install){Style.RESET_ALL}")
+    print(f"{Fore.YELLOW}{Style.BRIGHT}[2]{Style.RESET_ALL} {Fore.WHITE}Use existing node_modules (if available){Style.RESET_ALL}")
+    print(f"{Fore.YELLOW}{Style.BRIGHT}[3]{Style.RESET_ALL} {Fore.WHITE}Skip dependency installation{Style.RESET_ALL}")
+    
+    while True:
+        deps_choice = input(f"{Fore.WHITE}{Style.BRIGHT}❓ Select dependency option (1-3): {Style.RESET_ALL}").strip()
+        
+        # Clear screen after selection
+        os.system('cls' if os.name == 'nt' else 'clear')
+        
+        if deps_choice == "1":
+            install_npm_dependencies(project_root)
+            break
+        elif deps_choice == "2":
+            node_modules_path = os.path.join(project_root, "node_modules")
+            if os.path.exists(node_modules_path):
+                print_success("Found existing node_modules directory!")
+                print_info("Using existing dependencies. Run 'npm install' if you need to update them.")
+            else:
+                print_warning("No existing node_modules found in this location.")
+                print_info("You may need to run 'npm install' manually later.")
+            break
+        elif deps_choice == "3":
+            print_info("Skipping dependency installation.")
+            print_info("Remember to run 'npm install' before starting development.")
+            break
+        else:
+            print_error("Invalid choice. Please select 1, 2, or 3.")
+
+    # Show next steps
+    print(f"\n{Fore.GREEN}{Style.BRIGHT}🎉 PROJECT READY!{Style.RESET_ALL}")
+    print("─" * 30)
+    print_info("Next steps:")
+    print(f"  1. cd {project_name}")
+    if deps_choice != "1":
+        print("  2. npm install")
+        print("  3. npm run dev")
+    else:
+        print("  2. npm run dev")
+    print_info("Your React admin dashboard will be available at http://localhost:5173")
+    print_info("Make sure your backend API is running on http://localhost:8000")
+
+def init_react_admin_project_in_current_dir(project_name):
+    """Initialize React admin dashboard project structure in the current directory."""
+    structure_file = os.path.join(os.path.dirname(__file__), "structure.json")
+
+    if not os.path.exists(structure_file):
+        print_error(f"Structure file not found: {structure_file}")
+        return
+
+    with open(structure_file, "r", encoding="utf-8") as f:
+        structure = json.load(f)
+
+    project_root = os.getcwd()
+
+    variables = {
+        "project_name": project_name,
+    }
+
+    existing_files = [f for f in os.listdir(project_root) if not f.startswith('.')]
+    if existing_files:
+        print_warning(f"Current directory is not empty. Found {len(existing_files)} files/folders.")
+        print_info("Existing items: " + ", ".join(existing_files[:5]) + ("..." if len(existing_files) > 5 else ""))
+        
+        confirm = input(f"{Fore.WHITE}{Style.BRIGHT}❓ Continue anyway? (y/N): {Style.RESET_ALL}").strip().lower()
+        if confirm != 'y':
+            print_info("Project initialization cancelled.")
+            return
+
+    create_from_json(project_root, structure["{project_name}"], variables)
+    print_success(f"React admin dashboard '{project_name}' initialized in current directory: {project_root}")
+
+    # Ask user for dependency installation
+    print(f"\n{Fore.CYAN}{Style.BRIGHT}📦 NODE.JS DEPENDENCY SETUP{Style.RESET_ALL}")
+    print("─" * 40)
+    print(f"{Fore.YELLOW}{Style.BRIGHT}[1]{Style.RESET_ALL} {Fore.WHITE}Install dependencies now (npm install){Style.RESET_ALL}")
+    print(f"{Fore.YELLOW}{Style.BRIGHT}[2]{Style.RESET_ALL} {Fore.WHITE}Use existing node_modules (if available){Style.RESET_ALL}")
+    print(f"{Fore.YELLOW}{Style.BRIGHT}[3]{Style.RESET_ALL} {Fore.WHITE}Skip dependency installation{Style.RESET_ALL}")
+    
+    while True:
+        deps_choice = input(f"{Fore.WHITE}{Style.BRIGHT}❓ Select dependency option (1-3): {Style.RESET_ALL}").strip()
+        
+        # Clear screen after selection
+        os.system('cls' if os.name == 'nt' else 'clear')
+        
+        if deps_choice == "1":
+            install_npm_dependencies(project_root)
+            break
+        elif deps_choice == "2":
+            node_modules_path = os.path.join(project_root, "node_modules")
+            if os.path.exists(node_modules_path):
+                print_success("Found existing node_modules directory!")
+                print_info("Using existing dependencies. Run 'npm install' if you need to update them.")
+            else:
+                print_warning("No existing node_modules found in this location.")
+                print_info("You may need to run 'npm install' manually later.")
+            break
+        elif deps_choice == "3":
+            print_info("Skipping dependency installation.")
+            print_info("Remember to run 'npm install' before starting development.")
+            break
+        else:
+            print_error("Invalid choice. Please select 1, 2, or 3.")
+
+    # Show next steps
+    print(f"\n{Fore.GREEN}{Style.BRIGHT}🎉 PROJECT READY!{Style.RESET_ALL}")
+    print("─" * 30)
+    print_info("Next steps:")
+    if deps_choice != "1":
+        print("  1. npm install")
+        print("  2. npm run dev")
+    else:
+        print("  1. npm run dev")
+    print_info("Your React admin dashboard will be available at http://localhost:5173")
+    print_info("Make sure your backend API is running on http://localhost:8000")

ntc/templates/react_admin/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "{project_name}",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host=127.0.0.1",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@tanstack/react-query": "^5.99.0",
+    "axios": "^1.13.6",
+    "lucide-react": "^0.577.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-router-dom": "^7.13.1",
+    "tailwindcss": "^4.2.2"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.4",
+    "@types/node": "^24.12.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.39.4",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17.4.0",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.56.1",
+    "vite": "^5.4.17"
+  }
+}

ntc/templates/react_admin/src/App.tsx

@@ -0,0 +1,60 @@
+import { BrowserRouter, Routes, Route } from 'react-router-dom'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { ThemeProvider } from '@/context/ThemeContext'
+import { AuthProvider, useAuth } from '@/context/AuthContext'
+import { DashboardLayout } from '@/layouts/DashboardLayout'
+import { AuthLayout } from '@/layouts/AuthLayout'
+import { ProtectedRoute } from '@/components/ProtectedRoute'
+import { DashboardPage } from '@/pages/DashboardPage'
+import { LoginPage } from '@/pages/auth/LoginPage'
+import { RegisterPage } from '@/pages/auth/RegisterPage'
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 1000 * 60 * 2, // 2 minutes
+      gcTime: 1000 * 60 * 10, // 10 minutes
+      refetchOnWindowFocus: false,
+      retry: 1,
+    },
+  },
+})
+
+function AppShell() {
+  return (
+    <Routes>
+      {/* Auth routes */}
+      <Route path="/auth" element={<AuthLayout />}>
+        <Route path="login" element={<LoginPage />} />
+        <Route path="register" element={<RegisterPage />} />
+      </Route>
+
+      {/* Protected Dashboard routes */}
+      <Route
+        element={
+          <ProtectedRoute>
+            <DashboardLayout />
+          </ProtectedRoute>
+        }
+      >
+        <Route path="/" element={<DashboardPage />} />
+      </Route>
+    </Routes>
+  )
+}
+
+function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <BrowserRouter>
+        <ThemeProvider>
+          <AuthProvider>
+            <AppShell />
+          </AuthProvider>
+        </ThemeProvider>
+      </BrowserRouter>
+    </QueryClientProvider>
+  )
+}
+
+export default App

ntc/templates/react_admin/src/components/ProtectedRoute.tsx

@@ -0,0 +1,16 @@
+import { Navigate } from 'react-router-dom'
+import { useAuth } from '@/context/AuthContext'
+
+export function ProtectedRoute({ children }: { children: React.ReactNode }) {
+  const { authStatus } = useAuth()
+
+  if (authStatus === 'loading') {
+    return <div className="flex items-center justify-center min-h-screen">Loading...</div>
+  }
+
+  if (authStatus === 'unauthenticated') {
+    return <Navigate to="/auth/login" replace />
+  }
+
+  return <>{children}</>
+}

ntc/templates/react_admin/src/components/Sidebar.tsx

@@ -0,0 +1,90 @@
+import { NavLink } from 'react-router-dom'
+import { useWorkspace } from '@/context/WorkspaceContext'
+import { useAuth } from '@/context/AuthContext'
+import {
+  LayoutDashboard,
+  Settings,
+  LogOut,
+  Menu,
+  ChevronRight,
+} from 'lucide-react'
+
+interface NavItem {
+  to: string
+  icon: React.ElementType
+  label: string
+}
+
+const workspaceNav: NavItem[] = [
+  { to: '/', icon: LayoutDashboard, label: 'Dashboard' },
+  { to: '/settings', icon: Settings, label: 'Settings' },
+]
+
+export function Sidebar() {
+  const { sidebarCollapsed, setSidebarCollapsed } = useWorkspace()
+  const { user, logout } = useAuth()
+
+  return (
+    <aside
+      className={`fixed left-0 top-0 z-40 flex h-screen flex-col border-r border-gray-200 bg-white transition-all duration-300 ${
+        sidebarCollapsed ? 'w-[72px]' : 'w-[260px]'
+      }`}
+    >
+      {/* Logo */}
+      <div className="flex h-16 items-center border-b border-gray-200 px-4">
+        <button
+          onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
+          className="rounded-lg p-2 hover:bg-gray-100 transition-colors"
+        >
+          <Menu className="h-5 w-5 text-gray-600" />
+        </button>
+        {!sidebarCollapsed && (
+          <span className="ml-3 text-lg font-semibold text-gray-800">
+            Admin
+          </span>
+        )}
+      </div>
+
+      {/* Navigation */}
+      <nav className="flex-1 overflow-y-auto p-4">
+        <ul className="space-y-1">
+          {workspaceNav.map((item) => {
+            const Icon = item.icon
+            return (
+              <li key={item.to}>
+                <NavLink
+                  to={item.to}
+                  className={({ isActive }) =>
+                    `flex items-center rounded-lg px-3 py-2 transition-colors ${
+                      isActive
+                        ? 'bg-blue-50 text-blue-600'
+                        : 'text-gray-700 hover:bg-gray-100'
+                    } ${sidebarCollapsed ? 'justify-center' : ''}`
+                  }
+                >
+                  <Icon className="h-5 w-5 flex-shrink-0" />
+                  {!sidebarCollapsed && (
+                    <span className="ml-3">{item.label}</span>
+                  )}
+                </NavLink>
+              </li>
+            )
+          })}
+        </ul>
+      </nav>
+
+      {/* User Section */}
+      <div className="border-t border-gray-200 p-4">
+        <button
+          onClick={logout}
+          className={`flex items-center rounded-lg px-3 py-2 text-gray-700 hover:bg-gray-100 transition-colors ${
+            sidebarCollapsed ? 'justify-center' : 'w-full'
+          }`}
+        >
+          <LogOut className="h-5 w-5 flex-shrink-0" />
+          {!sidebarCollapsed && <span className="ml-3">Logout</span>}
+        </button>
+      </div>
+    </aside>
+  )
+}

ntc/templates/react_admin/src/components/TopNav.tsx

@@ -0,0 +1,44 @@
+import { useWorkspace } from '@/context/WorkspaceContext'
+import { useAuth } from '@/context/AuthContext'
+import { useTheme } from '@/context/ThemeContext'
+import { User, LogOut, Menu } from 'lucide-react'
+
+export function TopNav() {
+  const { setSidebarCollapsed } = useWorkspace()
+  const { user, logout } = useAuth()
+  const { theme, toggleTheme } = useTheme()
+
+  return (
+    <header className="h-16 border-b border-gray-200 bg-white px-6 flex items-center justify-between">
+      <button
+        onClick={() => setSidebarCollapsed(true)}
+        className="lg:hidden p-2 rounded-lg hover:bg-gray-100"
+      >
+        <Menu className="h-5 w-5 text-gray-600" />
+      </button>
+
+      <div className="flex items-center gap-4">
+        <button
+          onClick={toggleTheme}
+          className="p-2 rounded-lg hover:bg-gray-100 transition-colors"
+          title="Toggle theme"
+        >
+          {theme === 'light' ? '🌙' : '☀️'}
+        </button>
+
+        <div className="flex items-center gap-2">
+          <User className="h-5 w-5 text-gray-600" />
+          <span className="text-sm text-gray-700">{user?.name || 'User'}</span>
+        </div>
+
+        <button
+          onClick={logout}
+          className="p-2 rounded-lg hover:bg-gray-100 transition-colors"
+          title="Logout"
+        >
+          <LogOut className="h-5 w-5 text-gray-600" />
+        </button>
+      </div>
+    </header>
+  )
+}

ntc/templates/react_admin/src/context/AuthContext.tsx

@@ -0,0 +1,107 @@
+import { createContext, useContext, useState, useCallback } from 'react'
+import type { ReactNode } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { authAxios } from '@/services/base.service'
+import { authEndpoints } from '@/services/api.service'
+import type { User as ApiUser, AuthResult } from '@/services/api.service'
+
+export interface User {
+  id: string
+  name: string
+  email: string
+  avatar?: string | null
+  role?: string
+  created_at?: string
+}
+
+export type AuthStatus = 'loading' | 'authenticated' | 'unauthenticated'
+
+export interface AuthContextType {
+  user: User | null
+  accessToken: string | null
+  authStatus: AuthStatus
+  isAuthenticated: boolean
+  isLoading: boolean
+
+  setAccessToken: (token: string | null) => void
+  setUser: (user: User | null) => void
+
+  handleAuthSuccess: (result: AuthResult) => void
+  tryRefreshToken: () => Promise<boolean>
+  handleLogout: () => void
+  login: (email: string, password: string) => Promise<void>
+  register: (name: string, email: string, password: string) => Promise<void>
+  logout: () => void
+}
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined)
+
+export function AuthProvider({ children }: { children: ReactNode }) {
+  const [user, setUser] = useState<User | null>(null)
+  const [accessToken, setAccessToken] = useState<string | null>(null)
+  const [authStatus, setAuthStatus] = useState<AuthStatus>('loading')
+  const navigate = useNavigate()
+
+  const handleAuthSuccess = useCallback((result: AuthResult) => {
+    setAccessToken(result.access)
+    setUser(result.user)
+    setAuthStatus('authenticated')
+  }, [])
+
+  const tryRefreshToken = useCallback(async (): Promise<boolean> => {
+    try {
+      const result = await authEndpoints.refreshToken(authAxios)
+      setAccessToken(result.access)
+      setAuthStatus('authenticated')
+      return true
+    } catch {
+      setAuthStatus('unauthenticated')
+      setAccessToken(null)
+      setUser(null)
+      return false
+    }
+  }, [])
+
+  const handleLogout = useCallback(() => {
+    setAccessToken(null)
+    setUser(null)
+    setAuthStatus('unauthenticated')
+    navigate('/auth/login')
+  }, [navigate])
+
+  const login = useCallback(async (email: string, password: string) => {
+    const result = await authEndpoints.login(authAxios, email, password)
+    handleAuthSuccess(result)
+  }, [handleAuthSuccess])
+
+  const register = useCallback(async (name: string, email: string, password: string) => {
+    const result = await authEndpoints.register(authAxios, name, email, password)
+    handleAuthSuccess(result)
+  }, [handleAuthSuccess])
+
+  const value: AuthContextType = {
+    user,
+    accessToken,
+    authStatus,
+    isAuthenticated: authStatus === 'authenticated',
+    isLoading: authStatus === 'loading',
+    setAccessToken,
+    setUser,
+    handleAuthSuccess,
+    tryRefreshToken,
+    handleLogout,
+    login,
+    register,
+    logout: handleLogout,
+  }
+
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>
+}
+
+export function useAuth() {
+  const context = useContext(AuthContext)
+  if (context === undefined) {
+    throw new Error('useAuth must be used within an AuthProvider')
+  }
+  return context
+}

ntc/templates/react_admin/src/context/ThemeContext.tsx

@@ -0,0 +1,34 @@
+import { createContext, useContext, useState, useCallback } from 'react'
+import type { ReactNode } from 'react'
+
+type Theme = 'light' | 'dark'
+
+interface ThemeContextType {
+  theme: Theme
+  toggleTheme: () => void
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined)
+
+export function ThemeProvider({ children }: { children: ReactNode }) {
+  const [theme, setTheme] = useState<Theme>('light')
+
+  const toggleTheme = useCallback(() => {
+    setTheme((prev) => (prev === 'light' ? 'dark' : 'light'))
+  }, [])
+
+  const value: ThemeContextType = {
+    theme,
+    toggleTheme,
+  }
+
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
+}
+
+export function useTheme() {
+  const context = useContext(ThemeContext)
+  if (context === undefined) {
+    throw new Error('useTheme must be used within a ThemeProvider')
+  }
+  return context
+}

ntc/templates/react_admin/src/context/WorkspaceContext.tsx

@@ -0,0 +1,28 @@
+import { createContext, useContext, useState } from 'react'
+import type { ReactNode } from 'react'
+
+interface WorkspaceContextType {
+  sidebarCollapsed: boolean
+  setSidebarCollapsed: (collapsed: boolean) => void
+}
+
+const WorkspaceContext = createContext<WorkspaceContextType | undefined>(undefined)
+
+export function WorkspaceProvider({ children }: { children: ReactNode }) {
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(false)
+
+  const value: WorkspaceContextType = {
+    sidebarCollapsed,
+    setSidebarCollapsed,
+  }
+
+  return <WorkspaceContext.Provider value={value}>{children}</WorkspaceContext.Provider>
+}
+
+export function useWorkspace() {
+  const context = useContext(WorkspaceContext)
+  if (context === undefined) {
+    throw new Error('useWorkspace must be used within a WorkspaceProvider')
+  }
+  return context
+}

ntc/templates/react_admin/src/hooks/useApi.ts

@@ -0,0 +1,39 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import { baseAxios } from '@/services/base.service'
+import { extractErrorMessage } from '@/services/base.service'
+
+export function useApi<T>(
+  queryKey: string[],
+  url: string,
+  options?: { enabled?: boolean }
+) {
+  return useQuery({
+    queryKey,
+    queryFn: async () => {
+      const response = await baseAxios.get(url)
+      return response.data.data as T
+    },
+    enabled: options?.enabled,
+  })
+}
+
+export function useApiMutation<T, V = unknown>(
+  url: string,
+  method: 'POST' | 'PUT' | 'PATCH' | 'DELETE' = 'POST'
+) {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: async (data?: V) => {
+      const response = await baseAxios({
+        method,
+        url,
+        data,
+      })
+      return response.data.data as T
+    },
+    onError: (error) => {
+      console.error('API mutation error:', extractErrorMessage(error))
+    },
+  })
+}