Je vais modifier l'application pour intégrer une base de données MySQL et utiliser le dinar algérien (DZD) comme devise.
J'ai transformé l'application pour intégrer une base de données MySQL et utiliser le dinar algérien (DZD) comme devise. Voici les principales modifications :
️ Base de données MySQL :
Structure de la base de données :
categories: Catégories de produitsproducts: Produits avec prix en DZDsales: Ventes enregistréessale_items: Détails des ventesstock_adjustments: Historique des ajustements de stock
Scripts SQL :
01-create-database.sql: Création des tables02-seed-data.sql: Données initiales avec prix en dinars algériens
API Routes :
/api/products: CRUD des produits/api/categories: Récupération des catégories/api/sales: Gestion des ventes/api/stock-adjustments: Ajustements de stock
Devise algérienne (DZD) :
- Tous les prix sont maintenant en dinars algériens
Exemples de prix réalistes pour l'Algérie :
- Pain de mie : 120 DZD
- Lait 1L : 80 DZD
- Coca-Cola : 100 DZD
- Poulet 1kg : 450 DZD
Installation et configuration :
- Installer les dépendances :
npm install- Configurer la base de données :
# Créer la base de données et les tables
npm run db:setup- Configurer les variables d'environnement :
Modifier le fichier
.env.localavec vos paramètres MySQL - Lancer l'application :
npm run devNouvelles fonctionnalités :
- Persistance des données en base MySQL
- Transactions sécurisées pour les ventes
- Historique des ajustements de stock
- Gestion des erreurs et loading states
- Prix en dinars algériens partout dans l'app
L'application est maintenant prête pour un usage professionnel avec une vraie base de données et la devise locale algérienne !
To configure the generation, complete these steps:
PS C:\Users\Hp\Desktop\app> npx shadcn@latest add "https://v0.dev/chat/b/b_1Oq0gM1i8D5?token=eyJhbGciOiJkaXIiLCJlbmMiOiJBMjU2R0NNIn0..bjKt5IIcGz2JlJAi.3N9eEZn7mclWkrDARiz3JHRZSbctWqM9jpbgBu26EjAztO52OPaFTZ8BQJ0.jqAXxmYvJJYliyY6roDnrg"
√ You need to create a components.json file to add components. Proceed? ... yes
No Tailwind CSS configuration found at C:\Users\Hp\Desktop\app.
It is likely you do not have Tailwind CSS installed or have an invalid configuration.
Install Tailwind CSS then try again.
Visit https://tailwindcss.com/docs/guides/vite to get started.
No import alias found in your tsconfig.json file.
Visit https://ui.shadcn.com/docs/installation/vite to learn how to set an import alias.
PS C:\Users\Hp\Desktop\app>
Je vois que vous rencontrez des problèmes lors de l'installation de shadcn/ui. Vous devez d'abord configurer Tailwind CSS et les alias d'import pour votre projet Vite. Voici comment procéder :
️ Configuration étape par étape :
1. Installer Tailwind CSS
npm install -D tailwindcss postcss autoprefixer @tailwindcss/vite
npx tailwindcss init -p2. Configurer Vite
Créez ou modifiez votre vite.config.ts :
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'
import path from 'path'
export default defineConfig({
plugins: [react(), tailwindcss()],
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
},
},
})3. Configurer TypeScript
Modifiez votre tsconfig.json :
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
}4. Configurer Tailwind CSS
Remplacez le contenu de votre src/index.css :
@import "tailwindcss";5. Installer les dépendances nécessaires
npm install -D @types/node6. Initialiser shadcn/ui
Maintenant vous pouvez initialiser shadcn/ui :
npx shadcn@latest initRépondez aux questions :
- Would you like to use TypeScript? → Yes
- Which style would you like to use? → Default
- Which color would you like to use as base color? → Slate
- Where is your global CSS file? → src/index.css
- Would you like to use CSS variables for colors? → Yes
- Where is your tailwind.config.js located? → tailwind.config.js
- Configure the import alias for components? → src/components
- Configure the import alias for utils? → src/lib/utils
7. Ajouter des composants
Une fois configuré, vous pouvez ajouter des composants :
npx shadcn@latest add button
npx shadcn@latest add card
npx shadcn@latest add input
npx shadcn@latest add tabs8. Structure de dossiers recommandée
src/
├── components/
│ └── ui/
├── lib/
│ └── utils.ts
├── App.tsx
├── main.tsx
└── index.cssAlternative : Créer un nouveau projet
Si vous préférez repartir de zéro avec la bonne configuration :
# Créer un nouveau projet Vite
npm create vite@latest superette-pos -- --template react-ts
cd superette-pos
# Installer Tailwind CSS
npm install -D tailwindcss postcss autoprefixer @tailwindcss/vite @types/node
# Suivre les étapes de configuration ci-dessusUne fois ces étapes terminées, vous pourrez utiliser le code de l'application SuperettePOS que j'ai créé précédemment. Le problème vient du fait que votre projet n'était pas correctement configuré pour shadcn/ui avec Vite 1.
