- App.tsx: full navigation (Auth stack + Main tabs with 5 screens) - Auth: LoginScreen, RegisterScreen, ForgotPasswordScreen - HomeScreen: dashboard with IoT metrics, weather widget, alerts, quick actions, sensors - MapScreen: interactive map with layer toggles (6 layers) - MarketplaceScreen: categories (6), products (5), search - ChatScreen: AI chat with quick prompts (4), bot responses - ProfileScreen: user info, stats, menu (9 items), logout - AlertsScreen: alert list with severity, acknowledge - SensorsScreen: sensor list with type filters (6 types), search - ZonesScreen: zone cards with stats - SettingsScreen: language picker (FR/EN/ES/DE), privacy, about - Stores: iotStore (sensors, zones, alerts), notificationStore, uiStore + i18n - Hooks: useSensors, useAlerts, useNotifications, useLocation - Components: Card, Button, LoadingSpinner, ErrorBoundary, Header - Services: iotService, notificationService (with axios API client) - Utils: formatters (temp, AQI, noise, dates), validators (email, password, IBAN) - Theme: colors.ts with full design system (Blue Ocean palette) - Ditto: fixed MongoDB connection, new JWT secrets, official gateway image
57 lines
6.4 KiB
JSON
57 lines
6.4 KiB
JSON
{
|
|
"document": {
|
|
"name": "Smart App City — UI/UX v2 Blue",
|
|
"type": "DOCUMENT",
|
|
"children": [
|
|
{
|
|
"name": "Cover",
|
|
"type": "PAGE",
|
|
"children": [
|
|
{
|
|
"name": "Cover Frame",
|
|
"type": "FRAME",
|
|
"x": 0,
|
|
"y": 0,
|
|
"width": 1440,
|
|
"height": 900,
|
|
"fills": [
|
|
{
|
|
"type": "GRADIENT_LINEAR",
|
|
"gradientStops": [
|
|
{"color": {"r": 0.051, "g": 0.278, "b": 0.631, "a": 1}, "position": 0},
|
|
{"color": {"r": 0, "g": 0.514, "b": 0.561, "a": 1}, "position": 1}
|
|
]
|
|
}
|
|
],
|
|
"children": [
|
|
{"name": "Logo", "type": "RECTANGLE", "x": 620, "y": 200, "width": 200, "height": 200, "cornerRadius": 40, "fills": [{"type": "SOLID", "color": {"r": 1, "g": 1, "b": 1, "a": 0.15}}]},
|
|
{"name": "Title", "type": "TEXT", "x": 320, "y": 440, "width": 800, "text": "Smart App City", "fontSize": 72, "fontWeight": 700, "fills": [{"type": "SOLID", "color": {"r": 1, "g": 1, "b": 1, "a": 1}}]},
|
|
{"name": "Subtitle", "type": "TEXT", "x": 420, "y": 530, "width": 600, "text": "Martinique Digital Twin — UI/UX v2 Blue", "fontSize": 24, "fills": [{"type": "SOLID", "color": {"r": 1, "g": 1, "b": 1, "a": 0.7}}]},
|
|
{"name": "Version", "type": "TEXT", "x": 590, "y": 600, "width": 260, "text": "13 ecrans · Palette Blue Ocean · React Native", "fontSize": 14, "fills": [{"type": "SOLID", "color": {"r": 1, "g": 1, "b": 1, "a": 0.5}}]}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"name": "Screens",
|
|
"type": "PAGE",
|
|
"children": [
|
|
{"name": "01 Onboarding", "type": "FRAME", "x": 50, "y": 50, "width": 390, "height": 844, "cornerRadius": 40, "fills": [{"type": "GRADIENT_LINEAR", "gradientStops": [{"color": {"r": 0.051, "g": 0.278, "b": 0.631, "a": 1}, "position": 0}, {"color": {"r": 0, "g": 0.514, "b": 0.561, "a": 1}, "position": 1}]}], "strokes": [{"type": "SOLID", "color": {"r": 0.259, "g": 0.259, "b": 0.259, "a": 1}, "thickness": 3}]},
|
|
{"name": "02 Home Dashboard", "type": "FRAME", "x": 480, "y": 50, "width": 390, "height": 844, "cornerRadius": 40, "fills": [{"type": "SOLID", "color": {"r": 0.961, "g": 0.961, "b": 0.961, "a": 1}}], "strokes": [{"type": "SOLID", "color": {"r": 0.259, "g": 0.259, "b": 0.259, "a": 1}, "thickness": 3}]},
|
|
{"name": "03 Carte Interactive", "type": "FRAME", "x": 910, "y": 50, "width": 390, "height": 844, "cornerRadius": 40, "fills": [{"type": "SOLID", "color": {"r": 0.831, "g": 0.925, "b": 0.969, "a": 1}}], "strokes": [{"type": "SOLID", "color": {"r": 0.259, "g": 0.259, "b": 0.259, "a": 1}, "thickness": 3}]},
|
|
{"name": "04 Marketplace", "type": "FRAME", "x": 1340, "y": 50, "width": 390, "height": 844, "cornerRadius": 40, "fills": [{"type": "SOLID", "color": {"r": 0.082, "g": 0.396, "b": 0.753, "a": 1}}], "strokes": [{"type": "SOLID", "color": {"r": 0.259, "g": 0.259, "b": 0.259, "a": 1}, "thickness": 3}]},
|
|
{"name": "05 AI Chat", "type": "FRAME", "x": 1770, "y": 50, "width": 390, "height": 844, "cornerRadius": 40, "fills": [{"type": "SOLID", "color": {"r": 0.961, "g": 0.961, "b": 0.961, "a": 1}}], "strokes": [{"type": "SOLID", "color": {"r": 0.259, "g": 0.259, "b": 0.259, "a": 1}, "thickness": 3}]},
|
|
{"name": "06 Profil", "type": "FRAME", "x": 50, "y": 960, "width": 390, "height": 844, "cornerRadius": 40, "fills": [{"type": "GRADIENT_LINEAR", "gradientStops": [{"color": {"r": 0.051, "g": 0.278, "b": 0.631, "a": 1}, "position": 0}, {"color": {"r": 0, "g": 0.514, "b": 0.561, "a": 1}, "position": 1}]}], "strokes": [{"type": "SOLID", "color": {"r": 0.259, "g": 0.259, "b": 0.259, "a": 1}, "thickness": 3}]},
|
|
{"name": "07 Notifications", "type": "FRAME", "x": 480, "y": 960, "width": 390, "height": 844, "cornerRadius": 40, "fills": [{"type": "SOLID", "color": {"r": 0.082, "g": 0.396, "b": 0.753, "a": 1}}], "strokes":[{"type": "SOLID", "color": {"r": 0.259, "g": 0.259, "b": 0.259, "a": 1}, "thickness": 3}]},
|
|
{"name": "08 Signalements", "type": "FRAME", "x": 910, "y": 960, "width": 390, "height": 844, "cornerRadius": 40, "fills": [{"type": "SOLID", "color": {"r": 0.082, "g": 0.396, "b": 0.753, "a": 1}}], "strokes": [{"type": "SOLID", "color": {"r": 0.259, "g": 0.259, "b": 0.259, "a": 1}, "thickness": 3}]},
|
|
{"name": "09 Meteo", "type": "FRAME", "x": 1340, "y": 960, "width": 390, "height": 844, "cornerRadius": 40, "fills": [{"type": "GRADIENT_LINEAR", "gradientStops": [{"color": {"r": 0.051, "g": 0.278, "b": 0.631, "a": 1}, "position": 0}, {"color": {"r": 0.008, "g": 0.533, "b": 0.82, "a": 1}, "position": 1}]}], "strokes": [{"type": "SOLID", "color": {"r": 0.259, "g": 0.259, "b": 0.259, "a": 1}, "thickness": 3}]},
|
|
{"name": "10 Transport", "type": "FRAME", "x": 1770, "y": 960, "width": 390, "height": 844, "cornerRadius": 40, "fills": [{"type": "GRADIENT_LINEAR", "gradientStops": [{"color": {"r": 0.082, "g": 0.396, "b": 0.753, "a": 1}, "position": 0}, {"color": {"r": 0.008, "g": 0.533, "b": 0.82, "a": 1}, "position": 1}]}], "strokes": [{"type": "SOLID", "color": {"r": 0.259, "g": 0.259, "b": 0.259, "a": 1}, "thickness": 3}]},
|
|
{"name": "11 Energie", "type": "FRAME", "x": 50, "y": 1870, "width": 390, "height": 844, "cornerRadius": 40, "fills": [{"type": "GRADIENT_LINEAR", "gradientStops": [{"color": {"r": 0.082, "g": 0.396, "b": 0.753, "a": 1}, "position": 0}, {"color": {"r": 0, "g": 0.514, "b": 0.561, "a": 1}, "position": 1}]}], "strokes": [{"type": "SOLID", "color": {"r": 0.259, "g": 0.259, "b": 0.259, "a": 1}, "thickness": 3}]},
|
|
{"name": "12 Sante", "type": "FRAME", "x": 480, "y": 1870, "width": 390, "height": 844, "cornerRadius": 40, "fills": [{"type": "GRADIENT_LINEAR", "gradientStops": [{"color": {"r": 0, "g": 0.514, "b": 0.561, "a": 1}, "position": 0}, {"color": {"r": 0, "g": 0.675, "b": 0.757, "a": 1}, "position": 1}]}], "strokes": [{"type": "SOLID", "color": {"r": 0.259, "g": 0.259, "b": 0.259, "a": 1}, "thickness": 3}]},
|
|
{"name": "13 Evenements", "type": "FRAME", "x": 910, "y": 1870, "width": 390, "height": 844, "cornerRadius": 40, "fills": [{"type": "GRADIENT_LINEAR", "gradientStops": [{"color": {"r": 0.224, "g": 0.286, "b": 0.671, "a": 1}, "position": 0}, {"color": {"r": 0.082, "g": 0.396, "b": 0.753, "a": 1}, "position": 1}]}], "strokes": [{"type": "SOLID", "color": {"r": 0.259, "g": 0.259, "b": 0.259, "a": 1}, "thickness": 3}]}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
}
|