Krow-workspace/setup_admin_console.sh

#!/bin/bash

# Script pour initialiser l'application Admin Console en 4 étapes.
# Exécutez ce script depuis la racine du projet.
# Assurez-vous d'avoir les permissions d'exécution : chmod +x setup_admin_console.sh

# --- CONFIGURATION ---
# Arrête le script si une commande échoue
set -e

# --- SCRIPT ---

echo "🚀 Démarrage de la configuration de l'Admin Console..."

# --- ÉTAPE 1: SCAFFOLDING DE L'APPLICATION ---
echo ""
echo "--- Étape 1: Scaffolding de l'application admin-web ---"

if [ -d "admin-web" ]; then
    echo "⚠️  Le répertoire admin-web/ existe déjà. Le script va s'arrêter pour éviter d'écraser des données."
    exit 1
fi

echo "==> Création d'un nouveau projet React + Vite dans admin-web/..."
npm create vite@latest admin-web -- --template react

echo "==> Installation des dépendances initiales..."
cd admin-web
npm install
cd ..
echo "✅ Étape 1 terminée."

# --- ÉTAPE 2: CONFIGURATION DU STYLE ET DES DÉPENDANCES ---
echo ""
echo "--- Étape 2: Configuration du style et des dépendances ---"

echo "==> Installation des dépendances pour Tailwind CSS..."
cd admin-web
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

echo "==> Copie des fichiers de configuration depuis frontend-web/..."
# Le -f force l'écrasement des fichiers générés par `tailwindcss init`
cp -f ../frontend-web/tailwind.config.js ./tailwind.config.js
cp -f ../frontend-web/postcss.config.js ./postcss.config.js
cp ../frontend-web/components.json ./components.json
cp ../frontend-web/jsconfig.json ./jsconfig.json

echo "==> Configuration de Vite pour les alias de chemin..."
# Crée un nouveau vite.config.js avec la configuration d'alias
cat <<EOF > ./vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
})
EOF

echo "==> Copie du fichier CSS de base..."
cp ../frontend-web/src/index.css ./src/index.css

echo "==> Installation des dépendances pour shadcn/ui..."
npm install class-variance-authority clsx tailwind-merge tailwindcss-animate lucide-react

cd ..
echo "✅ Étape 2 terminée."

# --- ÉTAPE 3: CRÉATION DE LA COQUILLE VISUELLE ---
echo ""
echo "--- Étape 3: Création de la coquille visuelle de l'application ---"

echo "==> Création des répertoires de base (pages, components)..."
mkdir -p admin-web/src/pages
mkdir -p admin-web/src/components/ui
mkdir -p admin-web/src/lib

echo "==> Copie de l'utilitaire shadcn/ui..."
cp frontend-web/src/lib/utils.js admin-web/src/lib/utils.js

echo "==> Création du fichier App.jsx avec le routing..."
cat <<EOF > admin-web/src/App.jsx
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Layout from '@/pages/Layout';
import Dashboard from '@/pages/Dashboard';
import UserManagement from '@/pages/UserManagement';

function App() {
  return (
    <Router>
      <Layout>
        <Routes>
          <Route path="/" element={<Dashboard />} />
          <Route path="/users" element={<UserManagement />} />
        </Routes>
      </Layout>
    </Router>
  );
}

export default App;
EOF

echo "==> Création du fichier de Layout (Layout.jsx)..."
cat <<EOF > admin-web/src/pages/Layout.jsx
import React from 'react';
import { Link, useLocation } from 'react-router-dom';
import { LayoutDashboard, Users, Settings } from 'lucide-react';

const navigation = [
  { name: 'Dashboard', href: '/', icon: LayoutDashboard },
  { name: 'User Management', href: '/users', icon: Users },
];

export default function Layout({ children }) {
  const location = useLocation();

  return (
    <div className="min-h-screen flex">
      <aside className="w-64 bg-slate-800 text-white flex flex-col">
        <div className="p-4 border-b border-slate-700">
          <h1 className="text-xl font-bold text-center">KROW ADMIN</h1>
        </div>
        <nav className="flex-1 p-4 space-y-2">
          {navigation.map((item) => (
            <Link
              key={item.name}
              to={item.href}
              className={`flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium transition-colors ${
                location.pathname === item.href
                  ? 'bg-slate-900 text-white'
                  : 'text-slate-300 hover:bg-slate-700 hover:text-white'
              }`}
            >
              <item.icon className="w-5 h-5" />
              {item.name}
            </Link>
          ))}
        </nav>
      </aside>
      <main className="flex-1 bg-slate-100 p-8 overflow-auto">
        {children}
      </main>
    </div>
  );
}
EOF

echo "==> Création de la page Dashboard (Dashboard.jsx)..."
cat <<EOF > admin-web/src/pages/Dashboard.jsx
import React from 'react';

export default function Dashboard() {
  return (
    <div>
      <h1 className="text-3xl font-bold text-slate-800">Admin Dashboard</h1>
      <p className="text-slate-600 mt-2">Welcome to the Krow Admin Console.</p>
    </div>
  );
}
EOF

echo "==> Création de la page de gestion des utilisateurs (UserManagement.jsx)..."
cat <<EOF > admin-web/src/pages/UserManagement.jsx
import React from 'react';
// Note: Les composants Button, Card, etc. devront être ajoutés via shadcn-ui

export default function UserManagement() {
  return (
    <div>
      <div className="flex items-center justify-between mb-6">
        <h1 className="text-3xl font-bold text-slate-800">User Management</h1>
        {/*
        <Button>
          <UserPlus className="w-4 h-4 mr-2" />
          Invite User
        </Button>
        */}
      </div>
      <div className="bg-white p-6 rounded-lg shadow-md">
        <p>La table des utilisateurs apparaîtra ici.</p>
        <p className="text-sm text-slate-500 mt-4">
          Pour continuer, ajoutez les composants shadcn/ui nécessaires (table, button, etc.)
        </p>
      </div>
    </div>
  );
}
EOF

echo "==> Mise à jour de main.jsx pour inclure le Router..."
# Le App.jsx contient maintenant le Router, donc on met à jour main.jsx
cd admin-web
npm install react-router-dom
cat <<EOF > src/main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)
EOF
cd ..

echo "✅ Étape 3 terminée."

# --- ÉTAPE 4: MISE À JOUR DU MAKEFILE ---
echo ""
echo "--- Étape 4: Mise à jour du Makefile racine ---"

echo "==> Ajout des nouvelles cibles au Makefile..."
cat <<EOF >> Makefile

# --- Admin Console ---
admin-install:
	@echo "--> Installing admin console dependencies..."
	@cd admin-web && npm install

admin-dev:
	@echo "--> Starting admin console development server on http://localhost:5174 ..."
	@cd admin-web && npm run dev -- --port 5174

admin-build:
	@echo "--> Building admin console for production..."
	@cd admin-web && VITE_APP_ENV=\$(ENV) npm run build
EOF

echo "✅ Étape 4 terminée."

# --- INSTRUCTIONS FINALES ---
echo ""
echo "🎉 --- Configuration terminée avec succès! --- 🎉"
echo ""
echo "Voici les prochaines étapes manuelles :"
echo ""
echo "1.  Ajoutez les composants UI de base à votre nouvelle application :"
echo "    cd admin-web"
echo "    npx shadcn-ui@latest add button card table input label dialog select"
echo "    cd .."
echo ""
echo "2.  Mettez à jour la cible 'help' dans le Makefile pour inclure les nouvelles commandes :"
echo "    - make admin-install"
echo "    - make admin-dev"
echo "    - make admin-build"
echo ""
echo "3.  Lancez le serveur de développement de l'admin console avec :"
echo "    make admin-dev"
echo ""
echo "L'application sera disponible sur http://localhost:5174"
echo ""