[V0_FILE]typescriptreact:file="components/contract-signing.tsx" isMerged="true" "use client" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Checkbox } from "@/components/ui/checkbox" import { Badge } from "@/components/ui/badge" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog" import { FileText, Users, Calendar, DollarSign, Shield, CheckCircle, AlertTriangle, FilePenLineIcon as Signature, Download, } from "lucide-react" export function ContractSigning() { const [isSigningContract, setIsSigningContract] = useState(false) const [signature, setSignature] = useState("") const [agreedToTerms, setAgreedToTerms] = useState(false) const contractDetails = { groupName: "Famille Bamiléké 🏠", members: 8, contribution: 30000, totalAmount: 240000, duration: "8 mois", startDate: "1 Janvier 2025", payoutSchedule: "Mensuel", penalties: "5% du montant mensuel pour retard", } const contractTerms = [ "Chaque membre s'engage à contribuer ₦30,000 mensuellement", "Les paiements doivent être effectués avant le 5 de chaque mois", "L'ordre de réception est déterminé par tirage au sort équitable", "En cas de retard, une pénalité de 5% sera appliquée", "Si un membre manque son tour de retrait, les fonds sont automatiquement transférés vers son épargne personnelle sécurisée", "Tous les membres doivent signer numériquement ce contrat", "Les disputes seront résolues par vote majoritaire du groupe", "Le contrat peut être modifié avec l'accord de 75% des membres", ] const signedMembers = [ { name: "Amina Mballa", status: "signed", date: "2024-12-01", avatar: "AM" }, { name: "Jean Kamga", status: "signed", date: "2024-12-01", avatar: "JK" }, { name: "Marie Fotso", status: "signed", date: "2024-12-02", avatar: "MF" }, { name: "Paul Nkomo", status: "pending", date: null, avatar: "PN" }, { name: "Grace Tchoua", status: "signed", date: "2024-12-02", avatar: "GT" }, { name: "David Momo", status: "pending", date: null, avatar: "DM" }, { name: "Sarah Biya", status: "signed", date: "2024-12-01", avatar: "SB" }, { name: "Michel Fru", status: "pending", date: null, avatar: "MF" }, ] const signedCount = signedMembers.filter((member) => member.status === "signed").length return (

{/* Contract Header */}

Contrat Digital Tontine

{contractDetails.groupName}

Statut

{signedCount}/{contractDetails.members} Signatures

Validité

{contractDetails.duration}

{/* Contract Details */} Détails du Contrat

Membres: {contractDetails.members}

Contribution: ₦{contractDetails.contribution.toLocaleString()}

Début: {contractDetails.startDate}

Total:

₦{contractDetails.totalAmount.toLocaleString()}

Fréquence:

{contractDetails.payoutSchedule}

{/* Contract Terms */} Termes et Conditions

{contractTerms.map((term, index) => (

{index + 1}

{term}

))}

{/* Signing Status */} Statut des Signatures {signedCount}/{contractDetails.members} Signés

{signedMembers.map((member, index) => (

{member.avatar}

{member.name}

{member.status === "signed" ? ( <> {member.date} ) : ( <> En attente )}

))}

{/* Digital Signature */} {/* Download Contract */}

) } [V0_FILE]typescriptreact:file="tailwind.config.ts" isMerged="true" import type { Config } from "tailwindcss" const config: Config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { // Cultural colors for Njangi Smart "ancestral-blue": { 50: "#eff6ff", 100: "#dbeafe", 200: "#bfdbfe", 300: "#93c5fd", 400: "#60a5fa", 500: "#3b82f6", 600: "#1e40af", // Main ancestral blue 700: "#1e3a8a", 800: "#1e3a8a", 900: "#1e2a5e", // Deep ancestral blue }, "ndop-red": { 50: "#fef2f2", 100: "#fee2e2", 200: "#fecaca", 300: "#fca5a5", 400: "#f87171", 500: "#ef4444", 600: "#dc2626", // Main Ndop red 700: "#b91c1c", 800: "#991b1b", 900: "#7f1d1d", }, "loincloth-beige": { 50: "#fefdf8", 100: "#fef7e0", 200: "#fdecc8", 300: "#fbdba7", 400: "#f9c97c", 500: "#f7b955", // Main loincloth beige 600: "#f0a020", 700: "#d4841a", 800: "#b86914", 900: "#975312", }, border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, "fade-in": { "0%": { opacity: "0", transform: "translateY(10px)" }, "100%": { opacity: "1", transform: "translateY(0)" }, }, "slide-in": { "0%": { transform: "translateX(-100%)" }, "100%": { transform: "translateX(0)" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", "fade-in": "fade-in 0.5s ease-out", "slide-in": "slide-in 0.3s ease-out", }, backgroundImage: { "kente-pattern": "url(\"data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23f7b955' fill-opacity='0.1'%3E%3Cpath d='M30 30c0-16.569 13.431-30 30-30v60c-16.569 0-30-13.431-30-30z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E\")", "ndop-pattern": "url(\"data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%231e40af' fill-opacity='0.05'%3E%3Cpath d='M20 20c0-11.046 8.954-20 20-20v40c-11.046 0-20-8.954-20-20z'/%3E%3C/g%3E%3C/svg%3E\")", }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config export default config [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "15.5.10", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76" }, "devDependencies": { "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^3.4.17", "typescript": "^5" } } [V0_FILE]css:file="app/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { /* ── Njangi Smart Design Tokens ── */ --blue: 27 58 107; /* Ancestral Blue #1B3A6B */ --blue-mid: 42 82 152; /* Lighter blue #2A5298 */ --red: 179 48 38; /* Ndop Red #B33026 */ --red-light: 212 70 56; /* Ndop Red light #D44638 */ --beige: 245 230 200; /* Loincloth Beige #F5E6C8 */ --beige-dark: 228 208 172; /* Beige dark #E4D0AC */ --gold: 196 156 60; /* Warm gold #C49C3C */ --sand: 252 246 234; /* Near-white sand #FCF6EA */ --ink: 20 32 60; /* Deep ink #14203C */ --background: var(--beige); --foreground: var(--ink); --card: 255 255 255; --card-foreground: var(--ink); --popover: 255 255 255; --popover-foreground: var(--ink); --primary: var(--blue); --primary-foreground: var(--beige); --secondary: var(--beige-dark); --secondary-foreground: var(--blue); --muted: 235 220 195; --muted-foreground: 120 90 55; --accent: var(--red); --accent-foreground: 255 255 255; --destructive: var(--red); --destructive-foreground: 255 255 255; --border: 220 200 165; --input: 255 255 255; --ring: var(--blue); --radius: 0.875rem; --chart-1: 27 58 107; --chart-2: 179 48 38; --chart-3: 196 156 60; --chart-4: 42 82 152; --chart-5: 228 208 172; } } @layer base { * { @apply border-border; box-sizing: border-box; } html { height: 100%; } body { background-color: rgb(var(--beige)); color: rgb(var(--ink)); font-family: var(--font-nunito), system-ui, sans-serif; -webkit-font-smoothing: antialiased; min-height: 100%; } h1, h2, h3 { font-family: var(--font-playfair), Georgia, serif; } } /* ── African Patterns ── */ @layer utilities { .text-balance { text-wrap: balance; } .pattern-ndop { background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(196,156,60,.12) 10px, rgba(196,156,60,.12) 12px), repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(196,156,60,.12) 10px, rgba(196,156,60,.12) 12px); } .pattern-kente { background-image: repeating-linear-gradient(0deg, transparent, transparent 18px, rgba(179,48,38,.08) 18px, rgba(179,48,38,.08) 20px), repeating-linear-gradient(90deg, transparent, transparent 18px, rgba(27,58,107,.07) 18px, rgba(27,58,107,.07) 20px); } .pattern-diamonds { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect x='12' y='0' width='8' height='8' transform='rotate(45 12 4)' fill='rgba(196,156,60,0.13)'/%3E%3C/svg%3E"); } /* Shadows */ .shadow-card { box-shadow: 0 2px 16px rgba(27,58,107,.10); } .shadow-blue { box-shadow: 0 4px 24px rgba(27,58,107,.22); } .shadow-red { box-shadow: 0 4px 24px rgba(179,48,38,.22); } /* Scrollbar hide */ .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } /* Code font display */ .code-display { font-family: var(--font-space-mono), 'Courier New', monospace; letter-spacing: .28em; } } /* ── Smooth page transitions ── */ @keyframes fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-up { animation: fade-up .35s ease both; } @keyframes slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } } .animate-slide-up { animation: slide-up .3s cubic-bezier(.4,0,.2,1) both; } @keyframes pulse-soft { 0%, 100% { opacity: 1; } 50% { opacity: .55; } } .animate-pulse-soft { animation: pulse-soft 2s ease-in-out infinite; } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type { Metadata, Viewport } from 'next' import { Nunito, Playfair_Display, Space_Mono } from 'next/font/google' import './globals.css' const nunito = Nunito({ subsets: ['latin'], variable: '--font-nunito', weight: ['400', '600', '700', '800'], }) const playfair = Playfair_Display({ subsets: ['latin'], variable: '--font-playfair', weight: ['600', '700'], }) const spaceMono = Space_Mono({ subsets: ['latin'], variable: '--font-space-mono', weight: ['400', '700'], }) export const viewport: Viewport = { width: 'device-width', initialScale: 1, maximumScale: 1, userScalable: false, themeColor: '#1B3A6B', } export const metadata: Metadata = { title: 'Njangi Smart – Épargne Collective & Personnelle', description: 'Njangi Smart digitalise la tontine traditionnelle : groupes d\'épargne, portefeuille sécurisé, contrats numériques et codes dynamiques.', generator: 'v0.app', } export default function RootLayout({ children }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescript:file="lib/njangi-data.ts" isMerged="true" // ── Njangi Smart – shared mock data & types ────────────────────── export type Tab = 'dashboard' | 'tontines' | 'wallet' | 'profile' export type TontineGroup = { id: string name: string emoji: string members: number totalPool: number myContribution: number frequency: string nextDate: string position: number totalRounds: number status: 'active' | 'pending' | 'completed' contractSigned: boolean color: 'blue' | 'red' | 'gold' } export type Transaction = { id: string label: string type: 'deposit' | 'withdraw' | 'transfer' | 'auto-transfer' amount: number date: string code?: string source: 'tontine' | 'wallet' | 'personal' groupName?: string } export type SavingsGoal = { id: string label: string target: number current: number deadline: string } export const GROUPS: TontineGroup[] = [ { id: 'g1', name: 'Femmes de Bafang', emoji: '🌍', members: 12, totalPool: 480_000, myContribution: 40_000, frequency: 'Mensuel', nextDate: '30 mars 2025', position: 3, totalRounds: 12, status: 'active', contractSigned: true, color: 'blue', }, { id: 'g2', name: 'Club Entraide Douala', emoji: '🤝', members: 8, totalPool: 320_000, myContribution: 40_000, frequency: 'Bimensuel', nextDate: '15 mars 2025', position: 1, totalRounds: 8, status: 'active', contractSigned: true, color: 'red', }, { id: 'g3', name: 'Famille Tchamba', emoji: '🏡', members: 6, totalPool: 180_000, myContribution: 30_000, frequency: 'Mensuel', nextDate: '05 avr. 2025', position: 5, totalRounds: 6, status: 'pending', contractSigned: false, color: 'gold', }, ] export const TRANSACTIONS: Transaction[] = [ { id: 't1', label: 'Cotisation Femmes de Bafang', type: 'deposit', amount: 40_000, date: '28 fév. 2025', code: 'NJ-8X4K', source: 'tontine', groupName: 'Femmes de Bafang' }, { id: 't2', label: 'Retrait portefeuille', type: 'withdraw', amount: 25_000, date: '25 fév. 2025', code: 'NJ-3Z9M', source: 'wallet' }, { id: 't3', label: 'Cotisation Club Entraide', type: 'deposit', amount: 40_000, date: '15 fév. 2025', code: 'NJ-7W2P', source: 'tontine', groupName: 'Club Entraide Douala' }, { id: 't4', label: 'Virement auto manqué', type: 'auto-transfer', amount: 30_000, date: '05 fév. 2025', source: 'tontine', groupName: 'Famille Tchamba' }, { id: 't5', label: 'Épargne personnelle', type: 'transfer', amount: 15_000, date: '01 fév. 2025', source: 'personal' }, { id: 't6', label: 'Paiement reçu – Bafang', type: 'deposit', amount: 480_000, date: '28 jan. 2025', code: 'NJ-1A5Q', source: 'tontine', groupName: 'Femmes de Bafang' }, ] export const GOALS: SavingsGoal[] = [ { id: 'sg1', label: 'Achat moto-taxi', target: 750_000, current: 420_000, deadline: 'Juin 2025' }, { id: 'sg2', label: 'Frais scolaires', target: 200_000, current: 200_000, deadline: 'Sept. 2025' }, { id: 'sg3', label: 'Fonds d\'urgence', target: 300_000, current: 95_000, deadline: 'Déc. 2025' }, ] export const WALLET_BALANCE = 285_000 export const PERSONAL_BALANCE = 420_000 export const TOTAL_BALANCE = WALLET_BALANCE + PERSONAL_BALANCE export function fCFA(n: number) { return new Intl.NumberFormat('fr-FR').format(n) + ' FCFA' } export function generateCode() { const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789' let code = 'NJ-' for (let i = 0; i < 4; i++) code += chars[Math.floor(Math.random() * chars.length)] return code } [V0_FILE]typescriptreact:file="components/njangi/BottomNav.tsx" isMerged="true" 'use client' import type { Tab } from '@/lib/njangi-data' type Props = { active: Tab; onChange: (t: Tab) => void } const NAV_ITEMS: { id: Tab; label: string; icon: React.ReactNode }[] = [ { id: 'dashboard', label: 'Accueil', icon: ( ), }, { id: 'tontines', label: 'Tontines', icon: ( ), }, { id: 'wallet', label: 'Portefeuille', icon: ( ), }, { id: 'profile', label: 'Profil', icon: ( ), }, ] export default function BottomNav({ active, onChange }: Props) { return (

{NAV_ITEMS.map((item) => { const isActive = active === item.id return ( ) })}

) } [V0_FILE]typescriptreact:file="components/njangi/DashboardScreen.tsx" isMerged="true" 'use client' import { useState } from 'react' import { GROUPS, TRANSACTIONS, WALLET_BALANCE, PERSONAL_BALANCE, TOTAL_BALANCE, fCFA, generateCode, type Tab, } from '@/lib/njangi-data' type Props = { onNavigate: (t: Tab) => void; isPremium: boolean } export default function DashboardScreen({ onNavigate, isPremium }: Props) { const [codeVisible, setCodeVisible] = useState(false) const [activeCode, setActiveCode] = useState('') const [codeType, setCodeType] = useState<'deposit' | 'withdraw'>('deposit') function handleCode(type: 'deposit' | 'withdraw') { setCodeType(type) setActiveCode(generateCode()) setCodeVisible(true) } const recent = TRANSACTIONS.slice(0, 4) return (

{/* ── Header ── */}

{/* decorative arc */}

Akwaaba 👋

Amina Tchamba

{isPremium ? ( Premium ) : ( )}

{/* Balance card */}

Solde total

{fCFA(TOTAL_BALANCE)}

Tontines

{fCFA(WALLET_BALANCE)}

Épargne perso

{fCFA(PERSONAL_BALANCE)}

{/* ── Quick actions ── */}

{/* ── Stats row ── */}

{/* ── My tontines (preview) ── */}

Mes tontines

{(isPremium ? GROUPS : GROUPS.slice(0, 1)).map((g) => ( ))} {!isPremium && ( )}

{/* ── Recent transactions ── */}

Activité récente

{recent.map((tx) => ( ))}

{/* ── Dynamic Code Modal ── */} {codeVisible && (

setCodeVisible(false)} >

e.stopPropagation()} > {/* handle */}

{codeType === 'deposit' ? : }

Code dynamique

{codeType === 'deposit' ? 'Dépôt' : 'Retrait'}

Votre code

{activeCode}

Valide 15 minutes

Communiquez ce code à votre gestionnaire ou saisissez-le lors du transfert. Chaque code est unique et à usage unique.

)}

) } /* ── Sub-components ── */ function StatCard({ label, value, color }: { label: string; value: string; color: 'blue' | 'red' | 'gold' }) { const bg = { blue: 'bg-[#1B3A6B]', red: 'bg-[#B33026]', gold: 'bg-[#C49C3C]' }[color] return (

{label}

{value}

) } function TontineCard({ group, onNavigate }: { group: (typeof GROUPS)[0]; onNavigate: (t: Tab) => void }) { const pct = Math.round((group.position / group.totalRounds) * 100) const bgMap = { blue: 'bg-[#1B3A6B]', red: 'bg-[#B33026]', gold: 'bg-[#C49C3C]' } const fillMap = { blue: 'bg-[#C49C3C]', red: 'bg-[#F5E6C8]', gold: 'bg-[#1B3A6B]' } return ( ) } function TransactionRow({ tx }: { tx: (typeof TRANSACTIONS)[0] }) { const isPlus = tx.type === 'deposit' const icons: Record = { deposit: , withdraw: , transfer: , 'auto-transfer': , } const bgMap: Record = { deposit: 'bg-[#EFF4FF]', withdraw: 'bg-[#FEF2F0]', transfer: 'bg-[#FFF8EC]', 'auto-transfer': 'bg-[#F5F0E8]', } return (

{icons[tx.type]}

{tx.label}

{tx.date} {tx.code && · {tx.code}}

{isPlus ? '+' : '-'}{fCFA(tx.amount)}

) } /* ── Icon helpers ── */ function ArrowDownIcon({ className }: { className?: string }) { return ( ) } function ArrowUpIcon({ className }: { className?: string }) { return ( ) } function TransferIcon({ className }: { className?: string }) { return ( ) } function AutoIcon({ className }: { className?: string }) { return ( ) } function PlusIcon({ className }: { className?: string }) { return ( ) } function ClockIcon({ className }: { className?: string }) { return ( ) } [V0_FILE]typescriptreact:file="components/njangi/TontinesScreen.tsx" isMerged="true" 'use client' import { useState } from 'react' import { GROUPS, fCFA, type TontineGroup } from '@/lib/njangi-data' type Props = { isPremium: boolean; onUpgrade: () => void } type Modal = 'none' | 'create' | 'detail' | 'contract' export default function TontinesScreen({ isPremium, onUpgrade }: Props) { const [modal, setModal] = useState('none') const [selected, setSelected] = useState(null) const [contractSigned, setContractSigned] = useState(false) const [signName, setSignName] = useState('') const groups = isPremium ? GROUPS : GROUPS.slice(0, 1) function openDetail(g: TontineGroup) { setSelected(g) setModal('detail') } const colorMap = { blue: { bg: 'bg-[#1B3A6B]', light: 'bg-[#EFF4FF]', text: 'text-[#1B3A6B]', bar: 'bg-[#1B3A6B]' }, red: { bg: 'bg-[#B33026]', light: 'bg-[#FEF2F0]', text: 'text-[#B33026]', bar: 'bg-[#B33026]' }, gold: { bg: 'bg-[#C49C3C]', light: 'bg-[#FFF8EC]', text: 'text-[#C49C3C]', bar: 'bg-[#C49C3C]' }, } return (

{/* Header */}

Mes groupes

Tontines

{/* Freemium notice */} {!isPremium && (

Version gratuite — 1 groupe actif

Passez en Premium pour créer des groupes illimités, accéder aux analytics et aux notifications avancées.

)} {/* Group cards */} {groups.map((g) => { const c = colorMap[g.color] const pct = Math.round((g.position / g.totalRounds) * 100) const myPayout = g.totalPool return ( ) })} {/* Locked cards for freemium */} {!isPremium && GROUPS.slice(1).map((g) => ( ))}

{/* ── Detail Modal ── */} {modal === 'detail' && selected && ( setModal('none')}>

{selected.emoji}

{selected.name}

{selected.members} membres · {selected.frequency}

{/* Members list (mock) */}

Membres

{Array.from({ length: selected.members }).map((_, i) => (

{String.fromCharCode(65 + i)}

))}

{/* Auto-transfer notice */}

En cas de retrait manqué, le montant est automatiquement transféré dans votre portefeuille personnel.

{!selected.contractSigned && ( )}

)} {/* ── Contract Modal ── */} {modal === 'contract' && selected && ( setModal('detail')}>

Contrat de tontine

Accord de groupe – {selected.name}

Les membres soussignés s'engagent à cotiser {fCFA(selected.myContribution)} de manière {selected.frequency.toLowerCase()}, conformément aux règles établies du groupe.

Chaque membre recevra la cagnotte de {fCFA(selected.totalPool)} selon l'ordre préétabli. Tout manquement entraîne un transfert automatique vers le portefeuille personnel.

Le présent accord est signé numériquement et a valeur d'engagement moral entre les membres.

Signataires : {selected.members} membres requis.

Signez avec votre nom complet setSignName(e.target.value)} className="w-full border-2 border-[#E4D0AC] rounded-xl px-4 py-3 text-sm text-[#1B3A6B] bg-white focus:outline-none focus:border-[#1B3A6B] placeholder:text-[#C4A87A]" />

{contractSigned && (

Contrat signé avec succès

)}

)} {/* ── Create Group Modal ── */} {modal === 'create' && ( setModal('none')}> setModal('none')} /> )}

) } /* ── Helpers ── */ function StatusPill({ status }: { status: TontineGroup['status'] }) { const map = { active: 'bg-green-500/20 text-green-700', pending: 'bg-[#C49C3C]/20 text-[#7A5E1A]', completed: 'bg-[#B0936A]/20 text-[#6B4A1A]', } const labels = { active: 'Actif', pending: 'En attente', completed: 'Terminé' } return ( {labels[status]} ) } function InfoTile({ label, value }: { label: string; value: string }) { return (

{label}

{value}

) } function BottomSheet({ children, onClose }: { children: React.ReactNode; onClose: () => void }) { return (

e.stopPropagation()} >

{children}

) } function CreateGroupForm({ onClose }: { onClose: () => void }) { const [name, setName] = useState('') const [amount, setAmount] = useState('') const [members, setMembers] = useState('') const [freq, setFreq] = useState('Mensuel') const [created, setCreated] = useState(false) return (

Créer une tontine

{created ? (

Groupe créé !

Invitez les membres et faites signer le contrat.

) : ( <>

Fréquence

{['Hebdomadaire', 'Bimensuel', 'Mensuel'].map((f) => ( ))}

)}

) } function FormField({ label, value, onChange, placeholder, type = 'text' }: { label: string; value: string; onChange: (v: string) => void; placeholder: string; type?: string }) { return (

{label} onChange(e.target.value)} className="w-full border-2 border-[#E4D0AC] rounded-xl px-4 py-3 text-sm text-[#1B3A6B] bg-white focus:outline-none focus:border-[#1B3A6B] placeholder:text-[#C4A87A]" />

) } function LockIcon({ className }: { className?: string }) { return ( ) } function CheckIcon({ className }: { className?: string }) { return ( ) } function ContractIcon({ className }: { className?: string }) { return ( ) } function AutoIcon({ className }: { className?: string }) { return ( ) } [V0_FILE]typescriptreact:file="components/njangi/WalletScreen.tsx" isMerged="true" 'use client' import { useState } from 'react' import { TRANSACTIONS, GOALS, WALLET_BALANCE, PERSONAL_BALANCE, TOTAL_BALANCE, fCFA, generateCode, } from '@/lib/njangi-data' type WalletTab = 'overview' | 'history' | 'goals' export default function WalletScreen({ isPremium }: { isPremium: boolean }) { const [tab, setTab] = useState('overview') const [codeModal, setCodeModal] = useState(false) const [codeType, setCodeType] = useState<'deposit' | 'withdraw'>('deposit') const [activeCode, setActiveCode] = useState('') const [savedModal, setSavedModal] = useState(false) const [saveAmount, setSaveAmount] = useState('') const [filter, setFilter] = useState<'all' | 'deposit' | 'withdraw' | 'transfer'>('all') function openCode(type: 'deposit' | 'withdraw') { setCodeType(type) setActiveCode(generateCode()) setCodeModal(true) } const filtered = TRANSACTIONS.filter((tx) => filter === 'all' ? true : filter === 'transfer' ? (tx.type === 'transfer' || tx.type === 'auto-transfer') : tx.type === filter ) return (

{/* Header */}

Portefeuille

{fCFA(TOTAL_BALANCE)}

Solde total disponible

{/* Two sub-balances */}

Tontines

{fCFA(WALLET_BALANCE)}

Personnel

{fCFA(PERSONAL_BALANCE)}

{/* Action buttons */}

openCode('deposit')}> openCode('withdraw')}> setSavedModal(true)}>

{/* Tabs */}

{(['overview', 'history', 'goals'] as WalletTab[]).map((t) => ( ))}

{/* ── Overview ── */} {tab === 'overview' && (

{/* Security features */}

Sécurité du portefeuille

{[ { label: 'Authentification biométrique', active: true }, { label: 'Code PIN à 6 chiffres', active: true }, { label: 'Alertes transactions', active: true }, { label: 'Virement automatique (retrait manqué)', active: true }, { label: 'Double validation (2FA)', active: isPremium }, ].map((f) => (

{f.label}

))}

{/* Monthly chart (visual only) */}

Activité mensuelle

{[35, 60, 45, 80, 55, 90, 70, 40, 65, 85, 50, 75].map((h, i) => (

))}

MarAvrMaiJun JulAoûSepOct NovDécJanFév

{/* Auto-transfer info */}

Virement automatique activé

Si un retrait de tontine n'est pas effectué dans les 48h, le montant est automatiquement transféré dans votre portefeuille personnel.

)} {/* ── History ── */} {tab === 'history' && (

{/* Filter chips */}

{(['all', 'deposit', 'withdraw', 'transfer'] as const).map((f) => ( ))}

{filtered.map((tx) => { const isPlus = tx.type === 'deposit' const typeColors: Record = { deposit: 'bg-[#EFF4FF]', withdraw: 'bg-[#FEF2F0]', transfer: 'bg-[#FFF8EC]', 'auto-transfer': 'bg-[#F5F0E8]', } const typeIcons: Record = { deposit: , withdraw: , transfer: , 'auto-transfer': , } return (

{typeIcons[tx.type]}

{tx.label}

{tx.date}

{tx.code && ( {tx.code} )} {tx.type === 'auto-transfer' && ( Auto )}

{isPlus ? '+' : '-'}{fCFA(tx.amount)}

) })}

)} {/* ── Goals ── */} {tab === 'goals' && (

{GOALS.map((g, idx) => { const pct = Math.min(100, Math.round((g.current / g.target) * 100)) const barColors = ['bg-[#1B3A6B]', 'bg-[#B33026]', 'bg-[#C49C3C]'] const done = pct >= 100 return (

{g.label}

Échéance : {g.deadline}

{done && ( Atteint ! )}

{fCFA(g.current)} {fCFA(g.target)}

{pct}% atteint

) })} {isPremium && ( )} {!isPremium && (

Objectifs illimités avec Premium

Créez et suivez autant d'objectifs que vous souhaitez.

)}

{/* ── Dynamic Code Modal ── */} {codeModal && (

setCodeModal(false)}>

e.stopPropagation()}>

{codeType === 'deposit' ? : }

Code dynamique

{codeType === 'deposit' ? 'Dépôt' : 'Retrait'}

Votre code

{activeCode}

Valide 15 minutes · Usage unique

)} {/* ── Save Modal ── */} {savedModal && (

setSavedModal(false)}>

e.stopPropagation()}>

Épargner

Montant (FCFA) setSaveAmount(e.target.value)} className="w-full border-2 border-[#E4D0AC] rounded-xl px-4 py-3 text-sm text-[#1B3A6B] bg-white focus:outline-none focus:border-[#1B3A6B] placeholder:text-[#C4A87A] mb-4" />

)}

) } /* ── Sub-components ── */ function ActionBtn({ label, color, onClick, children }: { label: string; color: 'blue' | 'red' | 'gold'; onClick: () => void; children: React.ReactNode }) { const bg = { blue: 'bg-[#1B3A6B]', red: 'bg-[#B33026]', gold: 'bg-[#C49C3C]' }[color] return ( ) } /* ── Icons ── */ function ArrowDownIcon({ className }: { className?: string }) { return } function ArrowUpIcon({ className }: { className?: string }) { return } function PigIcon({ className }: { className?: string }) { return } function TransferIcon({ className }: { className?: string }) { return } function AutoIcon({ className }: { className?: string }) { return } function PlusIcon({ className }: { className?: string }) { return } function ClockIcon({ className }: { className?: string }) { return } [V0_FILE]typescriptreact:file="components/njangi/ProfileScreen.tsx" isMerged="true" 'use client' import { useState } from 'react' import { GROUPS, TOTAL_BALANCE, fCFA } from '@/lib/njangi-data' type Props = { isPremium: boolean; onUpgrade: () => void; onDowngrade: () => void } export default function ProfileScreen({ isPremium, onUpgrade, onDowngrade }: Props) { const [notifEnabled, setNotifEnabled] = useState(true) const [biometricEnabled, setBiometricEnabled] = useState(true) const [showPremiumModal, setShowPremiumModal] = useState(false) return (

{/* Header */}

Amina Tchamba

amina.tchamba@njangi.cm

{isPremium ? ( Compte Premium ) : ( Compte Gratuit )}

{/* Stats */}

{/* ── Plan Card ── */} {isPremium ? (

Votre plan

Premium

Actif

{[ 'Groupes de tontine illimités', 'Analytics et statistiques avancés', 'Notifications personnalisées', 'Thèmes culturels exclusifs', 'Double authentification (2FA)', 'Support prioritaire', ].map((f) => (

{f}

))}

) : (

{/* Free tier */}

Plan Gratuit

Actuel

{['1 groupe de tontine actif', 'Portefeuille de base', 'Codes dynamiques', 'Contrat numérique'].map((f) => (

{f}

))}

{/* Premium upsell */}

Premium

1 500 FCFA/mois

{[ 'Groupes illimités', 'Analytics avancés', 'Notifications avancées', 'Thèmes culturels exclusifs', '2FA et sécurité renforcée', 'Support prioritaire', ].map((f) => (

{f}

))}

)} {/* Settings */}

Paramètres

{[ { label: 'Langue', value: 'Français' }, { label: 'Devise', value: 'FCFA' }, { label: 'Thème', value: isPremium ? 'Ndop Bleu' : 'Standard' }, ].map((row) => (

{row.label}

{row.value}

))}

{/* Account actions */}

Compte

{[ { label: 'Modifier le profil', icon: }, { label: 'Sécurité et PIN', icon: }, { label: 'Inviter des amis', icon: }, { label: 'Aide & Support', icon: }, ].map((item) => (

{item.icon} {item.label}

))}

{/* Sign out */}

Njangi Smart v1.0.0 · Fait avec fierté en Afrique

{/* ── Premium Confirmation Modal ── */} {showPremiumModal && (

setShowPremiumModal(false)}>

e.stopPropagation()}>

Passer à Premium

Débloquez toutes les fonctionnalités

Prix mensuel

1 500 FCFA

Renouvelable chaque mois · Annulable à tout moment

{[ { label: 'Mobile Money', icon: '📱' }, { label: 'Orange Money', icon: '🟠' }, { label: 'MTN Mobile', icon: '🟡' }, { label: 'Carte bancaire', icon: '💳' }, ].map((method) => ( ))}

)}

) } /* ── Helpers ── */ function StatTile({ label, value }: { label: string; value: string }) { return (

{value}

{label}

) } function ToggleRow({ label, sublabel, checked, onChange }: { label: string; sublabel: string; checked: boolean; onChange: (v: boolean) => void }) { return (

{label}

{sublabel}

) } /* ── Icons ── */ function CheckIcon({ className }: { className?: string }) { return } function StarIcon({ className }: { className?: string }) { return } function ChevronIcon({ className }: { className?: string }) { return } function LockIcon({ className }: { className?: string }) { return } function EditIcon({ className }: { className?: string }) { return } function ShareIcon({ className }: { className?: string }) { return } function HelpIcon({ className }: { className?: string }) { return } [V0_FILE]typescriptreact:file="app/page.tsx" 'use client' import { useState } from 'react' import type { Tab } from '@/lib/njangi-data' import BottomNav from '@/components/njangi/BottomNav' import DashboardScreen from '@/components/njangi/DashboardScreen' import TontinesScreen from '@/components/njangi/TontinesScreen' import WalletScreen from '@/components/njangi/WalletScreen' import ProfileScreen from '@/components/njangi/ProfileScreen' export default function NjangiSmart() { const [tab, setTab] = useState('dashboard') const [isPremium, setIsPremium] = useState(false) const screens: Record = { dashboard: ( ), tontines: ( setTab('profile')} /> ), wallet: ( ), profile: ( setIsPremium(true)} onDowngrade={() => setIsPremium(false)} /> ), } return (

{screens[tab]}

) }