From e0c68dbbd2023501901136130b9e0756a248891e Mon Sep 17 00:00:00 2001 From: ectasy663 Date: Tue, 7 Oct 2025 19:07:10 +0530 Subject: [PATCH] =?UTF-8?q?chore:=20UI=20and=20i18n=20updates=20=E2=80=94?= =?UTF-8?q?=20HomeScreen,=20ProfileScreen,=20Documents,=20Generate=20and?= =?UTF-8?q?=20locales?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- add-translations.ps1 | 3 + src/i18n/locales/bn.ts | 51 +++ src/i18n/locales/en.ts | 51 +++ src/i18n/locales/hi.ts | 51 +++ src/i18n/locales/ta.ts | 51 +++ src/screens/AgentsScreen.tsx | 303 +++++++++++++--- src/screens/CRMScreen.tsx | 51 +-- src/screens/DocumentsScreen.tsx | 209 +++++++++-- src/screens/GenerateScreen.tsx | 171 ++++++--- src/screens/HRScreen.tsx | 51 +-- src/screens/HomeScreen.tsx | 602 +++++++++++++++++++++++--------- src/screens/ProfileScreen.tsx | 238 +++++++++---- src/screens/StrategyScreen.tsx | 86 +---- src/screens/WelcomeScreen.tsx | 51 +-- 14 files changed, 1399 insertions(+), 570 deletions(-) create mode 100644 add-translations.ps1 diff --git a/add-translations.ps1 b/add-translations.ps1 new file mode 100644 index 0000000..196ee80 --- /dev/null +++ b/add-translations.ps1 @@ -0,0 +1,3 @@ +# Script to add translations - this will be a reference +Write-Host 'Adding translations to locale files...' +Write-Host 'Files to update: bn, te, gu, kn, ml, mr, pa' diff --git a/src/i18n/locales/bn.ts b/src/i18n/locales/bn.ts index 4a52f74..b7594e6 100644 --- a/src/i18n/locales/bn.ts +++ b/src/i18n/locales/bn.ts @@ -299,6 +299,57 @@ export const bn = { error: 'ত্রুটি', success: 'সফলতা', + // Documents Screen + documentsScreen: { + title: 'নথি', + subtitle: 'AI-চালিত নথি ব্যবস্থাপনা', + overview: 'সারসংক্ষেপ', + recentActivity: 'সাম্প্রতিক কার্যকলাপ', + quickActions: 'দ্রুত কাজ', + activities: { + invoiceUploaded: 'ইনভয়েস #2024-089 আপলোড করা হয়েছে', + contractSigned: 'চুক্তি স্বাক্ষরিত ও সংরক্ষিত', + legalUpdated: 'আইনি নথি আপডেট করা হয়েছে', + hoursAgo: '{{hours}} ঘন্টা আগে', + yesterday: 'গতকাল', + daysAgo: '{{days}} দিন আগে', + }, + actions: { + searchDocuments: 'নথি খুঁজুন', + searchDescription: 'যেকোনো নথি তাৎক্ষণিক খুঁজে পান', + bulkUpload: 'বাল্ক আপলোড', + bulkUploadDescription: 'একসাথে একাধিক ফাইল আপলোড করুন', + }, + }, + + // Generate Screen + generateScreen: { + title: 'তৈরি করুন', + subtitle: 'AI-চালিত বিষয়বস্তু তৈরি', + seasonalCampaigns: 'মৌসুমী প্রচারাভিযান', + contentTemplates: 'বিষয়বস্তু টেমপ্লেট', + customization: 'কাস্টমাইজেশন', + templates: { + blogPost: 'ব্লগ পোস্ট', + blogPostDescription: 'SEO-অপ্টিমাইজড ব্লগ কনটেন্ট তৈরি করুন', + emailCampaign: 'ইমেল প্রচারাভিযান', + emailCampaignDescription: 'আকর্ষণীয় ইমেল নিউজলেটার তৈরি করুন', + socialMedia: 'সোশ্যাল মিডিয়া', + socialMediaDescription: 'সকল প্ল্যাটফর্মের জন্য পোস্ট তৈরি করুন', + designAssets: 'ডিজাইন সম্পদ', + designAssetsDescription: 'ব্র্যান্ডেড ভিজ্যুয়াল তৈরি করুন', + }, + brandVoiceDescription: 'আপনার অনন্য ব্র্যান্ড টোন সংজ্ঞায়িত করুন', + }, + + // Profile Screen + profileScreen: { + profileSettings: 'প্রোফাইল ও সেটিংস', + generateContent: 'বিষয়বস্তু তৈরি করুন', + more: 'আরও', + signOut: 'সাইন আউট', + }, + tasksScreen: { tabs: { hr: 'মানব সম্পদ', diff --git a/src/i18n/locales/en.ts b/src/i18n/locales/en.ts index 133d22b..6caa98c 100644 --- a/src/i18n/locales/en.ts +++ b/src/i18n/locales/en.ts @@ -337,6 +337,57 @@ export const en = { subtitle: 'Choose your preferred language to localise the experience.', }, + // Documents Screen + documentsScreen: { + title: 'Documents', + subtitle: 'AI-powered document management', + overview: 'Overview', + recentActivity: 'Recent Activity', + quickActions: 'Quick Actions', + activities: { + invoiceUploaded: 'Invoice #2024-089 uploaded', + contractSigned: 'Contract signed & archived', + legalUpdated: 'Legal doc updated', + hoursAgo: '{{hours}} hours ago', + yesterday: 'Yesterday', + daysAgo: '{{days}} days ago', + }, + actions: { + searchDocuments: 'Search Documents', + searchDescription: 'Find any document instantly', + bulkUpload: 'Bulk Upload', + bulkUploadDescription: 'Upload multiple files at once', + }, + }, + + // Generate Screen + generateScreen: { + title: 'Generate', + subtitle: 'AI-powered content creation', + seasonalCampaigns: 'Seasonal Campaigns', + contentTemplates: 'Content Templates', + customization: 'Customization', + templates: { + blogPost: 'Blog Post', + blogPostDescription: 'Generate SEO-optimized blog content', + emailCampaign: 'Email Campaign', + emailCampaignDescription: 'Create engaging email newsletters', + socialMedia: 'Social Media', + socialMediaDescription: 'Craft posts for all platforms', + designAssets: 'Design Assets', + designAssetsDescription: 'Generate branded visuals', + }, + brandVoiceDescription: 'Define your unique brand tone', + }, + + // Profile Screen + profileScreen: { + profileSettings: 'Profile & Settings', + generateContent: 'Generate Content', + more: 'More', + signOut: 'Sign Out', + }, + // Tasks Screen tasksScreen: { tabs: { diff --git a/src/i18n/locales/hi.ts b/src/i18n/locales/hi.ts index 4391749..337b231 100644 --- a/src/i18n/locales/hi.ts +++ b/src/i18n/locales/hi.ts @@ -337,6 +337,57 @@ export const hi = { subtitle: 'अपनी पसंदीदा भाषा चुनें ताकि अनुभव स्थानीय हो सके।', }, + // Documents Screen + documentsScreen: { + title: 'दस्तावेज़', + subtitle: 'AI-संचालित दस्तावेज़ प्रबंधन', + overview: 'अवलोकन', + recentActivity: 'हाल की गतिविधि', + quickActions: 'त्वरित कार्य', + activities: { + invoiceUploaded: 'चालान #2024-089 अपलोड किया गया', + contractSigned: 'अनुबंध हस्ताक्षरित और संग्रहीत', + legalUpdated: 'कानूनी दस्तावेज़ अपडेट किया गया', + hoursAgo: '{{hours}} घंटे पहले', + yesterday: 'कल', + daysAgo: '{{days}} दिन पहले', + }, + actions: { + searchDocuments: 'दस्तावेज़ खोजें', + searchDescription: 'किसी भी दस्तावेज़ को तुरंत खोजें', + bulkUpload: 'बल्क अपलोड', + bulkUploadDescription: 'एक साथ कई फाइलें अपलोड करें', + }, + }, + + // Generate Screen + generateScreen: { + title: 'उत्पन्न करें', + subtitle: 'AI-संचालित सामग्री निर्माण', + seasonalCampaigns: 'मौसमी अभियान', + contentTemplates: 'सामग्री टेम्पलेट', + customization: 'अनुकूलन', + templates: { + blogPost: 'ब्लॉग पोस्ट', + blogPostDescription: 'SEO-अनुकूलित ब्लॉग सामग्री उत्पन्न करें', + emailCampaign: 'ईमेल अभियान', + emailCampaignDescription: 'आकर्षक ईमेल न्यूज़लेटर बनाएं', + socialMedia: 'सोशल मीडिया', + socialMediaDescription: 'सभी प्लेटफ़ॉर्म के लिए पोस्ट तैयार करें', + designAssets: 'डिज़ाइन संपत्ति', + designAssetsDescription: 'ब्रांडेड विज़ुअल उत्पन्न करें', + }, + brandVoiceDescription: 'अपना अनूठा ब्रांड टोन परिभाषित करें', + }, + + // Profile Screen + profileScreen: { + profileSettings: 'प्रोफ़ाइल और सेटिंग्स', + generateContent: 'सामग्री उत्पन्न करें', + more: 'अधिक', + signOut: 'साइन आउट', + }, + // Tasks Screen tasksScreen: { tabs: { diff --git a/src/i18n/locales/ta.ts b/src/i18n/locales/ta.ts index 5f8ad40..484d0b8 100644 --- a/src/i18n/locales/ta.ts +++ b/src/i18n/locales/ta.ts @@ -299,6 +299,57 @@ export const ta = { subtitle: 'அனுபவத்தை உள்ளூர்மயமாக்க உங்கள் விருப்ப மொழியைத் தேர்வு செய்யவும்.', }, + // Documents Screen + documentsScreen: { + title: 'ஆவணங்கள்', + subtitle: 'AI-இயக்கப்படும் ஆவண மேலாண்மை', + overview: 'கண்ணோட்டம்', + recentActivity: 'சமீபத்திய செயல்பாடு', + quickActions: 'விரைவு செயல்கள்', + activities: { + invoiceUploaded: 'விலைப்பட்டியல் #2024-089 பதிவேற்றப்பட்டது', + contractSigned: 'ஒப்பந்தம் கையெழுத்திடப்பட்டது & காப்பகப்படுத்தப்பட்டது', + legalUpdated: 'சட்ட ஆவணம் புதுப்பிக்கப்பட்டது', + hoursAgo: '{{hours}} மணி நேரம் முன்பு', + yesterday: 'நேற்று', + daysAgo: '{{days}} நாட்களுக்கு முன்பு', + }, + actions: { + searchDocuments: 'ஆவணங்களைத் தேடு', + searchDescription: 'எந்த ஆவணத்தையும் உடனடியாக கண்டறியவும்', + bulkUpload: 'மொத்த பதிவேற்றம்', + bulkUploadDescription: 'ஒரே நேரத்தில் பல கோப்புகளை பதிவேற்றவும்', + }, + }, + + // Generate Screen + generateScreen: { + title: 'உருவாக்கு', + subtitle: 'AI-இயக்கப்படும் உள்ளடக்க உருவாக்கம்', + seasonalCampaigns: 'பருவகால பிரச்சாரங்கள்', + contentTemplates: 'உள்ளடக்க வார்ப்புருக்கள்', + customization: 'தனிப்பயனாக்கம்', + templates: { + blogPost: 'வலைப்பதிவு இடுகை', + blogPostDescription: 'SEO-உகந்த வலைப்பதிவு உள்ளடக்கத்தை உருவாக்கவும்', + emailCampaign: 'மின்னஞ்சல் பிரச்சாரம்', + emailCampaignDescription: 'ஈர்க்கும் மின்னஞ்சல் செய்திமடல்களை உருவாக்கவும்', + socialMedia: 'சமூக ஊடகம்', + socialMediaDescription: 'அனைத்து தளங்களுக்கும் இடுகைகளை உருவாக்கவும்', + designAssets: 'வடிவமைப்பு சொத்துக்கள்', + designAssetsDescription: 'பிராண்ட் காட்சிப்படுத்தல்களை உருவாக்கவும்', + }, + brandVoiceDescription: 'உங்கள் தனித்துவமான பிராண்ட் குரலை வரையறுக்கவும்', + }, + + // Profile Screen + profileScreen: { + profileSettings: 'சுயவிவரம் & அமைப்புகள்', + generateContent: 'உள்ளடக்கத்தை உருவாக்கு', + more: 'மேலும்', + signOut: 'வெளியேறு', + }, + tasksScreen: { tabs: { hr: 'மனிதவள', diff --git a/src/screens/AgentsScreen.tsx b/src/screens/AgentsScreen.tsx index 523c25a..18d7914 100644 --- a/src/screens/AgentsScreen.tsx +++ b/src/screens/AgentsScreen.tsx @@ -1,81 +1,276 @@ -import React from 'react'; -import { StyleSheet, Text, View } from 'react-native'; +import React, { useMemo } from 'react'; +import { StyleSheet, Text, View, TouchableOpacity } from 'react-native'; import { useTranslation } from 'react-i18next'; +import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'; import { Screen } from '../components/Screen'; -import { SectionCard } from '../components/SectionCard'; -import { ListButton } from '../components/ListButton'; -import { colors } from '../theme/colors'; +import { AgentCard } from '../components/AgentCard'; +import { colors, typography, spacing, borderRadius, shadows, iconSizes } from '../theme'; + +type Agent = { + id: string; + name: string; + role: string; + avatar: string; + status: 'active' | 'idle' | 'busy'; +}; + +const agentConfigs: Array<{ + id: string; + avatar: string; + status: Agent['status']; + nameKey: string; + roleKey: string; +}> = [ + { + id: 'evelyn', + avatar: 'https://i.pravatar.cc/120?img=1', + status: 'active', + nameKey: 'evelyn', + roleKey: 'agentsScreen.roles.accountant', + }, + { + id: 'malik', + avatar: 'https://i.pravatar.cc/120?img=2', + status: 'active', + nameKey: 'malik', + roleKey: 'agentsScreen.roles.hrManager', + }, + { + id: 'aria', + avatar: 'https://i.pravatar.cc/120?img=3', + status: 'idle', + nameKey: 'aria', + roleKey: 'agentsScreen.roles.adminAssistant', + }, + { + id: 'marcus', + avatar: 'https://i.pravatar.cc/120?img=4', + status: 'active', + nameKey: 'agentsScreen.names.marcus', + roleKey: 'agentsScreen.roles.strategyAdvisor', + }, + { + id: 'sofia', + avatar: 'https://i.pravatar.cc/120?img=5', + status: 'busy', + nameKey: 'agentsScreen.names.sofia', + roleKey: 'agentsScreen.roles.crmSpecialist', + }, + { + id: 'alex', + avatar: 'https://i.pravatar.cc/120?img=6', + status: 'idle', + nameKey: 'agentsScreen.names.alex', + roleKey: 'agentsScreen.roles.contentDesigner', + }, +]; export const AgentsScreen: React.FC = () => { const { t } = useTranslation(); + const agents: Agent[] = useMemo( + () => + agentConfigs.map((config) => ({ + id: config.id, + avatar: config.avatar, + status: config.status, + name: t(config.nameKey), + role: t(config.roleKey), + })), + [t] + ); + + const statusSummary = useMemo( + () => [ + { + color: '#4ADE80', + label: t('agentsScreen.statusSummary.active', { count: 3 }), + }, + { + color: '#FBBF24', + label: t('agentsScreen.statusSummary.idle', { count: 2 }), + }, + { + color: '#F87171', + label: t('agentsScreen.statusSummary.busy', { count: 1 }), + }, + ], + [t] + ); + + const quickActions = useMemo( + () => [ + { + icon: 'message-text', + label: t('agentsScreen.actions.chat'), + }, + { + icon: 'history', + label: t('agentsScreen.actions.reports'), + }, + ], + [t] + ); return ( - - {t('aiAgents')} + + + {t('agentsScreen.title')} + {t('agentsScreen.subtitle')} + + + + - - - - {t('transcodingDataFeeds')} - - - {t('agentSummary')} - - - + {/* Active Agents Stats */} + + {statusSummary.map((item, index) => ( + + {index > 0 && } + + + {item.label} + + + ))} + - - - - + {/* Agents Grid */} + + {t('agentsScreen.availableTitle')} + {t('agentsScreen.availableSubtitle')} + + + + {agents.map((agent) => ( + {}} + /> + ))} + + + {/* Quick Actions */} + + {t('agentsScreen.quickActionsTitle')} + + {quickActions.map((action) => ( + + + {action.label} + + ))} + ); }; const styles = StyleSheet.create({ - headerRow: { + header: { flexDirection: 'row', justifyContent: 'space-between', - alignItems: 'center', + alignItems: 'flex-start', + marginBottom: spacing.lg, }, title: { - fontSize: 32, - fontWeight: '900', + ...typography.h1, color: colors.highlightAlt, - letterSpacing: 0.8, }, - agentCard: { - gap: 16, - }, - statusPill: { - alignSelf: 'flex-start', - paddingHorizontal: 16, - paddingVertical: 8, - borderRadius: 20, - backgroundColor: 'rgba(14, 95, 79, 0.9)', - borderWidth: 2, - borderColor: colors.borderStrong, - shadowColor: colors.highlight, - shadowOffset: { width: 0, height: 6 }, - shadowOpacity: 0.4, - shadowRadius: 10, - elevation: 6, - }, - statusLabel: { - fontSize: 13, - fontWeight: '700', - color: colors.highlightAlt, - letterSpacing: 0.4, - }, - agentSummary: { - fontSize: 14, + subtitle: { + ...typography.body, color: colors.textSecondary, - lineHeight: 22, + marginTop: spacing.xs, }, - actionsList: { - gap: 14, + addButton: { + width: 48, + height: 48, + borderRadius: borderRadius.md, + backgroundColor: colors.highlight, + alignItems: 'center', + justifyContent: 'center', + ...shadows.glow, + }, + statsCard: { + flexDirection: 'row', + padding: spacing.lg, + borderRadius: borderRadius.lg, + backgroundColor: colors.surfaceAlt, + borderWidth: 2, + borderColor: colors.border, + marginBottom: spacing.lg, + ...shadows.md, + }, + statItem: { + flex: 1, + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + gap: spacing.sm, + }, + statDot: { + width: 8, + height: 8, + borderRadius: 4, + }, + statLabel: { + ...typography.bodyBold, + color: colors.textPrimary, + }, + statDivider: { + width: 1, + height: '100%', + backgroundColor: colors.border, + }, + sectionHeader: { + marginBottom: spacing.lg, + }, + sectionTitle: { + ...typography.h3, + color: colors.highlightAlt, + }, + sectionSubtitle: { + ...typography.caption, + color: colors.textSecondary, + marginTop: 4, + }, + agentsGrid: { + flexDirection: 'row', + flexWrap: 'wrap', + gap: spacing.md, + marginBottom: spacing.lg, + }, + quickActions: { + marginTop: spacing.lg, + }, + actionsGrid: { + flexDirection: 'row', + gap: spacing.md, + marginTop: spacing.lg, + }, + actionButton: { + flex: 1, + padding: spacing.lg, + borderRadius: borderRadius.lg, + backgroundColor: colors.surfaceAlt, + borderWidth: 2, + borderColor: colors.border, + alignItems: 'center', + gap: spacing.sm, + ...shadows.md, + }, + actionLabel: { + ...typography.caption, + color: colors.textPrimary, + textAlign: 'center', }, }); diff --git a/src/screens/CRMScreen.tsx b/src/screens/CRMScreen.tsx index 80e6a39..3ea6b6e 100644 --- a/src/screens/CRMScreen.tsx +++ b/src/screens/CRMScreen.tsx @@ -1,50 +1 @@ -import React from 'react'; -import { StyleSheet, Text, View } from 'react-native'; -import { useTranslation } from 'react-i18next'; -import { NativeStackScreenProps } from '@react-navigation/native-stack'; -import { Screen } from '../components/Screen'; -import { SectionCard } from '../components/SectionCard'; -import { ListButton } from '../components/ListButton'; -import { TasksStackParamList } from '../types/navigation'; -import { TaskHeader } from '../components/TaskHeader'; -import { colors } from '../theme/colors'; - -type Props = NativeStackScreenProps; - -export const CRMScreen: React.FC = ({ navigation }) => { - const { t } = useTranslation(); - - return ( - - navigation.navigate(screen)} - /> - - - - {t('pipelineExposure')} - - - - - - - - - - ); -}; - -const styles = StyleSheet.create({ - cardBody: { - fontSize: 14, - color: colors.textSecondary, - lineHeight: 22, - }, - actionsList: { - gap: 14, - }, -}); +export { TasksScreen as CRMScreen } from './TasksScreen'; diff --git a/src/screens/DocumentsScreen.tsx b/src/screens/DocumentsScreen.tsx index 249320a..e4f7959 100644 --- a/src/screens/DocumentsScreen.tsx +++ b/src/screens/DocumentsScreen.tsx @@ -1,45 +1,212 @@ import React from 'react'; -import { StyleSheet, Text, View } from 'react-native'; +import { StyleSheet, Text, View, TouchableOpacity } from 'react-native'; import { useTranslation } from 'react-i18next'; +import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'; import { Screen } from '../components/Screen'; -import { SectionCard } from '../components/SectionCard'; -import { ListButton } from '../components/ListButton'; -import { colors } from '../theme/colors'; +import { QuickActionCard } from '../components/QuickActionCard'; +import { StatCard } from '../components/StatCard'; +import { colors, spacing, borderRadius, typography, shadows, iconSizes } from '../theme'; + +type DocumentCategory = { + id: string; + icon: string; + label: string; + count: number; + color?: string; +}; export const DocumentsScreen: React.FC = () => { const { t } = useTranslation(); + const documentCategories: DocumentCategory[] = [ + { id: 'invoices', icon: 'file-document', label: t('invoices'), count: 24 }, + { id: 'contracts', icon: 'file-sign', label: t('contracts'), count: 8, color: '#4ADE80' }, + { id: 'legal', icon: 'scale-balance', label: t('legal'), count: 12, color: '#F59E0B' }, + { id: 'hr', icon: 'account-tie', label: t('hr'), count: 16, color: '#3B82F6' }, + ]; + return ( - - - {t('documents')} + + {/* Header */} + + + {t('documentsScreen.title')} + {t('documentsScreen.subtitle')} + + + + - - - - - - + {/* Stats Overview */} + + {t('documentsScreen.overview')} + + {documentCategories.map((category) => ( + + ))} - + + + {/* Recent Activity */} + + {t('documentsScreen.recentActivity')} + + + + + + + {t('documentsScreen.activities.invoiceUploaded')} + {t('documentsScreen.activities.hoursAgo', { hours: 2 })} + + + + + + + + + {t('documentsScreen.activities.contractSigned')} + {t('documentsScreen.activities.yesterday')} + + + + + + + + + {t('documentsScreen.activities.legalUpdated')} + {t('documentsScreen.activities.daysAgo', { days: 3 })} + + + + + + {/* Quick Actions */} + + {t('documentsScreen.quickActions')} + + {}} + /> + {}} + /> + {}} + /> + + ); }; const styles = StyleSheet.create({ - headerRow: { + header: { flexDirection: 'row', justifyContent: 'space-between', - alignItems: 'center', + alignItems: 'flex-start', + marginBottom: spacing.lg, }, title: { - fontSize: 32, - fontWeight: '900', + ...typography.h1, color: colors.highlightAlt, - letterSpacing: 0.8, }, - actionsList: { - gap: 14, + subtitle: { + ...typography.body, + color: colors.textSecondary, + marginTop: spacing.xs, + }, + addButton: { + width: 48, + height: 48, + borderRadius: borderRadius.md, + backgroundColor: colors.highlight, + alignItems: 'center', + justifyContent: 'center', + ...shadows.glow, + }, + section: { + marginBottom: spacing.xl, + }, + sectionLabel: { + ...typography.caption, + fontSize: 11, + fontWeight: '800', + color: colors.textSecondary, + textTransform: 'uppercase', + letterSpacing: 1.2, + marginBottom: spacing.md, + }, + statsGrid: { + flexDirection: 'row', + flexWrap: 'wrap', + gap: spacing.md, + }, + statCard: { + flex: 1, + minWidth: 150, + }, + activityCard: { + backgroundColor: colors.surfaceAlt, + borderRadius: borderRadius.lg, + padding: spacing.lg, + borderWidth: 2, + borderColor: colors.border, + ...shadows.md, + }, + activityItem: { + flexDirection: 'row', + alignItems: 'center', + gap: spacing.md, + }, + activityIcon: { + width: 44, + height: 44, + borderRadius: borderRadius.md, + backgroundColor: colors.surface, + borderWidth: 2, + borderColor: colors.border, + alignItems: 'center', + justifyContent: 'center', + }, + activityContent: { + flex: 1, + gap: spacing.xs, + }, + activityTitle: { + ...typography.bodyBold, + fontSize: 15, + color: colors.textPrimary, + }, + activityTime: { + ...typography.caption, + color: colors.textSecondary, + }, + activityDivider: { + height: 1, + backgroundColor: colors.border, + marginVertical: spacing.md, + }, + actionsContainer: { + gap: spacing.md, }, }); diff --git a/src/screens/GenerateScreen.tsx b/src/screens/GenerateScreen.tsx index cd6f6b6..5475175 100644 --- a/src/screens/GenerateScreen.tsx +++ b/src/screens/GenerateScreen.tsx @@ -1,85 +1,158 @@ import React from 'react'; -import { StyleSheet, Text, View } from 'react-native'; +import { StyleSheet, Text, View, TouchableOpacity } from 'react-native'; import { useTranslation } from 'react-i18next'; +import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'; import { Screen } from '../components/Screen'; -import { SectionCard } from '../components/SectionCard'; -import { ListButton } from '../components/ListButton'; -import { colors } from '../theme/colors'; +import { QuickActionCard } from '../components/QuickActionCard'; +import { colors, spacing, borderRadius, typography, shadows, iconSizes } from '../theme'; export const GenerateScreen: React.FC = () => { const { t } = useTranslation(); const campaigns = [ - { key: 'festivities', label: t('festivities') }, - { key: 'diwali', label: t('diwali') }, - { key: 'newYear', label: t('newYear') } + { key: 'festivities', label: t('festivities'), icon: 'party-popper' }, + { key: 'diwali', label: t('diwali'), icon: 'candle' }, + { key: 'newYear', label: t('newYear'), icon: 'firework' } ]; return ( - - - {t('generate')} + + {/* Header */} + + + {t('generateScreen.title')} + {t('generateScreen.subtitle')} + - - + {/* Seasonal Campaigns */} + + {t('generateScreen.seasonalCampaigns')} + {campaigns.map(item => ( - - {item.label} - {t('campaignBlueprint')} - + + + + + + {item.label} + {t('campaignBlueprint')} + + + ))} - + - - - + {/* Content Templates */} + + {t('generateScreen.contentTemplates')} + + {}} + /> + {}} + /> + {}} + /> + + + + {/* Brand Voice */} + + {t('generateScreen.customization')} + + {}} + /> + {}} + /> + ); }; const styles = StyleSheet.create({ - headerRow: { - flexDirection: 'row', - justifyContent: 'space-between', - alignItems: 'center', + header: { + marginBottom: spacing.xl, }, title: { - fontSize: 32, - fontWeight: '900', + ...typography.h1, color: colors.highlightAlt, - letterSpacing: 0.8, }, - chipList: { - gap: 16, + subtitle: { + ...typography.body, + color: colors.textSecondary, + marginTop: spacing.xs, }, - chip: { - padding: 20, - borderRadius: 20, - backgroundColor: 'rgba(26, 64, 54, 0.92)', + section: { + marginBottom: spacing.xl, + }, + sectionLabel: { + ...typography.caption, + fontSize: 11, + fontWeight: '800', + color: colors.textSecondary, + textTransform: 'uppercase', + letterSpacing: 1.2, + marginBottom: spacing.md, + }, + campaignGrid: { + gap: spacing.md, + }, + campaignCard: { + flexDirection: 'row', + alignItems: 'center', + padding: spacing.lg, + borderRadius: borderRadius.lg, + backgroundColor: colors.surfaceAlt, + borderWidth: 2, + borderColor: colors.border, + gap: spacing.md, + ...shadows.md, + }, + campaignIcon: { + width: 52, + height: 52, + borderRadius: borderRadius.md, + backgroundColor: colors.surface, borderWidth: 2, borderColor: colors.borderStrong, - shadowColor: colors.highlight, - shadowOffset: { width: 0, height: 12 }, - shadowOpacity: 0.4, - shadowRadius: 16, - elevation: 10, - gap: 8, + alignItems: 'center', + justifyContent: 'center', }, - chipLabel: { - fontSize: 17, - fontWeight: '800', + campaignContent: { + flex: 1, + gap: spacing.xs, + }, + campaignLabel: { + ...typography.h4, + fontSize: 16, color: colors.highlightAlt, - letterSpacing: 0.4, }, - chipCaption: { - fontSize: 13, + campaignCaption: { + ...typography.caption, color: colors.textSecondary, - fontWeight: '600', - letterSpacing: 0.2, }, - actionsList: { - gap: 14, + actionsContainer: { + gap: spacing.md, }, }); diff --git a/src/screens/HRScreen.tsx b/src/screens/HRScreen.tsx index c9b54a0..96fd349 100644 --- a/src/screens/HRScreen.tsx +++ b/src/screens/HRScreen.tsx @@ -1,50 +1 @@ -import React from 'react'; -import { StyleSheet, Text, View } from 'react-native'; -import { useTranslation } from 'react-i18next'; -import { Screen } from '../components/Screen'; -import { SectionCard } from '../components/SectionCard'; -import { ListButton } from '../components/ListButton'; -import { colors } from '../theme/colors'; -import { NativeStackScreenProps } from '@react-navigation/native-stack'; -import { TaskHeader } from '../components/TaskHeader'; -import { TasksStackParamList } from '../types/navigation'; - -type Props = NativeStackScreenProps; - -export const HRScreen: React.FC = ({ navigation }) => { - const { t } = useTranslation(); - - return ( - - navigation.navigate(screen)} - active="HR" - /> - - - - {t('cultureIntelligence')} - - - - - - - - - - ); -}; - -const styles = StyleSheet.create({ - cardBody: { - fontSize: 14, - color: colors.textSecondary, - lineHeight: 22, - }, - actionsList: { - gap: 14, - }, -}); +export { TasksScreen as HRScreen } from './TasksScreen'; diff --git a/src/screens/HomeScreen.tsx b/src/screens/HomeScreen.tsx index c726dc7..e5c1aa2 100644 --- a/src/screens/HomeScreen.tsx +++ b/src/screens/HomeScreen.tsx @@ -1,87 +1,295 @@ -import React, { useState } from 'react'; -import { Image, StyleSheet, Text, View, ImageBackground, TouchableOpacity } from 'react-native'; +import React, { useMemo, useState } from 'react'; +import { Image, StyleSheet, Text, View, TouchableOpacity, ScrollView, Modal } from 'react-native'; import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'; import { useTranslation } from 'react-i18next'; +import { useNavigation } from '@react-navigation/native'; +import type { BottomTabNavigationProp } from '@react-navigation/bottom-tabs'; import { Screen } from '../components/Screen'; -import { SectionCard } from '../components/SectionCard'; -import { ListButton } from '../components/ListButton'; +import { SummaryCard } from '../components/SummaryCard'; +import { StatCard } from '../components/StatCard'; +import { QuickActionCard } from '../components/QuickActionCard'; import { LanguageSelector } from '../components/LanguageSelector'; -import { colors } from '../theme/colors'; +import { colors, typography, spacing, borderRadius, shadows } from '../theme'; +import type { MainTabParamList } from '../types/navigation'; -type Avatar = { +const logo = require('../assets/ic_launcher_foreground.png'); + +type NavigationProp = BottomTabNavigationProp; + +interface Company { + id: string; name: string; - role: string; -}; + industry: string; + revenue: string; + employees: number; + growth: string; + invoicesPending: number; + hrApprovals: number; + renewalDays: number; +} -const avatars: Avatar[] = [ - { name: 'Evelyn', role: 'Accountant' }, - { name: 'Malik', role: 'HR' }, - { name: 'Aria', role: 'Admin' }, +const COMPANIES: Company[] = [ + { + id: '1', + name: 'TechCorp Solutions', + industry: 'Technology', + revenue: '₹1.2M', + employees: 45, + growth: '+18%', + invoicesPending: 5, + hrApprovals: 3, + renewalDays: 7, + }, + { + id: '2', + name: 'Green Retail Pvt Ltd', + industry: 'Retail', + revenue: '₹850K', + employees: 28, + growth: '+12%', + invoicesPending: 8, + hrApprovals: 2, + renewalDays: 14, + }, + { + id: '3', + name: 'Skyline Manufacturing', + industry: 'Manufacturing', + revenue: '₹2.5M', + employees: 120, + growth: '+25%', + invoicesPending: 12, + hrApprovals: 7, + renewalDays: 3, + }, ]; -const ActionItem: React.FC<{ icon: string; label: string }> = ({ icon, label }) => ( - - - {label} - - -); - export const HomeScreen: React.FC = () => { const { t } = useTranslation(); + const navigation = useNavigation(); const [languageSelectorVisible, setLanguageSelectorVisible] = useState(false); + const [companyDropdownVisible, setCompanyDropdownVisible] = useState(false); + const [selectedCompany, setSelectedCompany] = useState(COMPANIES[0]); + + // User name from profile - this can be made dynamic later + const userName = t('johnDoe'); // John Doe + + const greeting = useMemo(() => { + return `Hi, ${userName}`; + }, [userName]); + + const summaryItems = useMemo( + () => [ + { + icon: 'file-document-outline', + count: selectedCompany.invoicesPending, + label: t('homeScreen.summary.invoicesPending', { count: selectedCompany.invoicesPending }), + color: colors.highlight, + }, + { + icon: 'account-check', + count: selectedCompany.hrApprovals, + label: t('homeScreen.summary.hrApprovals', { count: selectedCompany.hrApprovals }), + color: '#4ADE80', + }, + { + icon: 'refresh', + count: 1, + label: `Renewal in ${selectedCompany.renewalDays} days`, + color: '#FBBF24', + }, + ], + [t, selectedCompany] + ); + + const statItems = useMemo( + () => [ + { + icon: 'cash', + label: t('homeScreen.stats.revenue'), + value: selectedCompany.revenue, + trend: { value: selectedCompany.growth, isPositive: true }, + }, + { + icon: 'account-group', + label: t('homeScreen.stats.employees'), + value: selectedCompany.employees.toString(), + trend: { value: '+2', isPositive: true }, + }, + { + icon: 'chart-line', + label: t('homeScreen.stats.growth'), + value: selectedCompany.growth, + trend: { value: '+5%', isPositive: true }, + }, + ], + [t, selectedCompany] + ); + + const quickActions = useMemo( + () => [ + { + icon: 'email-send', + label: t('homeScreen.actions.sendSalarySlips.label'), + description: t('homeScreen.actions.sendSalarySlips.description', { count: 15 }), + badge: 15, + color: undefined, + }, + { + icon: 'file-refresh', + label: t('homeScreen.actions.renewVendorContract.label'), + description: t('homeScreen.actions.renewVendorContract.description', { days: 5 }), + badge: '!', + color: '#FBBF24', + }, + { + icon: 'chart-box', + label: t('homeScreen.actions.reviewPnLReport.label'), + description: t('homeScreen.actions.reviewPnLReport.description'), + badge: undefined, + color: undefined, + }, + ], + [t] + ); return ( - - {t('home')} - + {/* Top Bar */} + + + {greeting} + + + {/* Navigate to profile */}} + > + + setLanguageSelectorVisible(true)} > - + - - - - - - - - - {avatars.map(avatar => ( - - - - - {t(avatar.name.toLowerCase())} - {t(avatar.role.toLowerCase())} + + + + 6 - ))} + - + + {/* Company Selector Below Greeting */} + setCompanyDropdownVisible(true)} + > + + + {selectedCompany.name} + {selectedCompany.industry} + + + + + {/* Decorative Divider */} + + + {/* Quick Stats Cards */} + + + {statItems.map((item) => ( + + ))} + + + + {/* AI Insights Summary */} + + + {/* Suggested Actions */} - {t('suggestedActions')} - {t('tailoredFocus')} + {t('homeScreen.suggestedActions')} + {t('homeScreen.suggestionsSubtitle')} - - - - + + + {quickActions.map((action) => ( + {}} + /> + ))} + {/* Company Dropdown Modal */} + setCompanyDropdownVisible(false)} + > + setCompanyDropdownVisible(false)} + > + + + Select Company + setCompanyDropdownVisible(false)}> + + + + {COMPANIES.map((company) => ( + { + setSelectedCompany(company); + setCompanyDropdownVisible(false); + }} + > + + {company.name} + {company.industry} + + {selectedCompany.id === company.id && ( + + )} + + ))} + + + + setLanguageSelectorVisible(false)} @@ -91,137 +299,209 @@ export const HomeScreen: React.FC = () => { }; const styles = StyleSheet.create({ - headerRow: { + topBar: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', + marginBottom: spacing.md, }, - title: { - fontSize: 36, - fontWeight: '900', - color: colors.highlightAlt, - letterSpacing: 0.8, - }, - headerRight: { - flexDirection: 'row', - alignItems: 'center', - gap: 12, - }, - languageButton: { - width: 48, - height: 48, - borderRadius: 16, - backgroundColor: colors.surfaceAlt, - borderWidth: 2, - borderColor: colors.borderStrong, - alignItems: 'center', - justifyContent: 'center', - shadowColor: colors.highlight, - shadowOffset: { width: 0, height: 8 }, - shadowOpacity: 0.3, - shadowRadius: 12, - elevation: 6, - }, - avatarShell: { - width: 52, - height: 52, - borderRadius: 18, - borderWidth: 2, - borderColor: colors.borderStrong, - backgroundColor: colors.surfaceAlt, - alignItems: 'center', - justifyContent: 'center', - shadowColor: colors.highlight, - shadowOffset: { width: 0, height: 8 }, - shadowOpacity: 0.3, - shadowRadius: 12, - elevation: 6, - }, - avatar: { - width: 42, - height: 42, - borderRadius: 16, - }, - avatarRow: { - flexDirection: 'row', - justifyContent: 'space-between', - }, - avatarCard: { - alignItems: 'center', - gap: 8, + topBarLeft: { flex: 1, }, - avatarGlow: { - width: 100, - height: 100, - borderRadius: 32, - backgroundColor: 'rgba(26, 64, 54, 0.95)', + topBarRight: { + flexDirection: 'row', + alignItems: 'center', + gap: spacing.sm, + }, + greeting: { + ...typography.h2, + fontSize: 22, + color: colors.highlightAlt, + fontWeight: '700', + }, + profileButton: { + width: 44, + height: 44, + borderRadius: borderRadius.md, + backgroundColor: colors.surfaceAlt, borderWidth: 2, - borderColor: colors.borderStrong, + borderColor: colors.border, alignItems: 'center', justifyContent: 'center', - shadowColor: colors.highlight, - shadowOffset: { width: 0, height: 16 }, - shadowOpacity: 0.45, - shadowRadius: 24, - elevation: 14, }, - avatarLarge: { - width: 78, - height: 78, - borderRadius: 26, + iconButton: { + width: 44, + height: 44, + borderRadius: borderRadius.md, + backgroundColor: colors.surfaceAlt, + borderWidth: 2, + borderColor: colors.border, + alignItems: 'center', + justifyContent: 'center', + position: 'relative', }, - avatarName: { - fontSize: 16, + notificationBadge: { + position: 'absolute', + top: -4, + right: -4, + minWidth: 18, + height: 18, + borderRadius: 9, + backgroundColor: '#EF4444', + alignItems: 'center', + justifyContent: 'center', + paddingHorizontal: 4, + borderWidth: 2, + borderColor: colors.background, + }, + notificationText: { + ...typography.caption, + fontSize: 10, + color: '#FFFFFF', fontWeight: '800', - color: colors.highlightAlt, - letterSpacing: 0.4, }, - avatarRole: { - fontSize: 13, + companySelector: { + flexDirection: 'row', + alignItems: 'center', + gap: spacing.md, + paddingVertical: spacing.sm, + paddingHorizontal: spacing.md, + borderRadius: borderRadius.lg, + backgroundColor: colors.surfaceAlt, + borderWidth: 2, + borderColor: colors.border, + marginBottom: spacing.lg, + ...shadows.md, + }, + companyLogo: { + width: 44, + height: 44, + }, + companyInfo: { + flex: 1, + }, + companyName: { + ...typography.h4, + fontSize: 16, + color: colors.highlightAlt, + fontWeight: '700', + }, + industryLabel: { + ...typography.caption, + fontSize: 11, + color: colors.textSecondary, + marginTop: 2, + }, + decorativeDivider: { + height: 1, + backgroundColor: colors.highlight, + marginVertical: spacing.lg, + opacity: 0.5, + }, + statsSection: { + marginBottom: spacing.lg, + }, + welcomeSection: { + marginBottom: spacing.lg, + }, + subtitle: { + ...typography.body, color: colors.textSecondary, - fontWeight: '600', - letterSpacing: 0.2, }, sectionHeader: { - gap: 6, + marginBottom: spacing.lg, }, sectionTitle: { - fontSize: 22, - fontWeight: '800', + ...typography.h3, color: colors.highlightAlt, - letterSpacing: 0.4, }, - sectionCaption: { - fontSize: 14, + sectionSubtitle: { + ...typography.caption, color: colors.textSecondary, - fontWeight: '600', - letterSpacing: 0.2, + marginTop: 4, }, - actionsList: { - gap: 14, + statsScroll: { + marginBottom: spacing.sm, + marginHorizontal: -spacing.xl, + paddingHorizontal: spacing.xl, }, - actionItem: { + companyDropdownButton: { flexDirection: 'row', alignItems: 'center', - paddingVertical: 18, - paddingHorizontal: 22, - borderRadius: 18, - backgroundColor: 'rgba(26, 64, 54, 0.92)', + gap: spacing.sm, + paddingVertical: spacing.xs, + }, + businessName: { + ...typography.h3, + fontSize: 18, + color: colors.highlightAlt, + fontWeight: '700', + }, + logoImage: { + width: 52, + height: 52, + }, + logoText: { + ...typography.h4, + color: colors.background, + fontWeight: '900', + }, + statsContainer: { + gap: spacing.md, + paddingRight: spacing.xl, + }, + actionsContainer: { + gap: spacing.md, + }, + modalOverlay: { + flex: 1, + backgroundColor: 'rgba(0, 0, 0, 0.5)', + justifyContent: 'center', + alignItems: 'center', + padding: spacing.xl, + }, + companyDropdownModal: { + backgroundColor: colors.surface, + borderRadius: borderRadius.lg, + width: '100%', + maxWidth: 400, borderWidth: 2, borderColor: colors.borderStrong, - shadowColor: colors.shadow, - shadowOffset: { width: 0, height: 12 }, - shadowOpacity: 0.4, - shadowRadius: 16, - elevation: 8, - gap: 14, + ...shadows.lg, }, - actionLabel: { + modalHeader: { + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', + padding: spacing.lg, + borderBottomWidth: 2, + borderBottomColor: colors.border, + }, + modalTitle: { + ...typography.h3, + color: colors.highlightAlt, + }, + companyOption: { + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', + padding: spacing.lg, + borderBottomWidth: 1, + borderBottomColor: colors.border, + }, + companyOptionSelected: { + backgroundColor: colors.surfaceAlt, + }, + companyOptionContent: { flex: 1, - color: colors.textPrimary, - fontSize: 16, - fontWeight: '700', - letterSpacing: 0.5, + }, + companyOptionName: { + ...typography.h4, + color: colors.highlightAlt, + marginBottom: 4, + }, + companyOptionIndustry: { + ...typography.caption, + color: colors.textSecondary, }, }); diff --git a/src/screens/ProfileScreen.tsx b/src/screens/ProfileScreen.tsx index dfabc69..02a1da9 100644 --- a/src/screens/ProfileScreen.tsx +++ b/src/screens/ProfileScreen.tsx @@ -1,98 +1,214 @@ import React from 'react'; -import { Image, StyleSheet, Text, View } from 'react-native'; +import { Image, StyleSheet, Text, View, TouchableOpacity, ScrollView } from 'react-native'; import { useTranslation } from 'react-i18next'; +import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'; import { Screen } from '../components/Screen'; -import { SectionCard } from '../components/SectionCard'; -import { ListButton } from '../components/ListButton'; -import { colors } from '../theme/colors'; +import { colors, spacing, borderRadius, typography, shadows, iconSizes } from '../theme'; import { NativeStackScreenProps } from '@react-navigation/native-stack'; import { MoreStackParamList } from '../types/navigation'; -import { PrimaryButton } from '../components/PrimaryButton'; type Props = NativeStackScreenProps; export const ProfileScreen: React.FC = ({ navigation }) => { const { t } = useTranslation(); + // Profile Section Options + const profileOptions = [ + { icon: 'account-circle', label: t('userInfo') }, + { icon: 'credit-card', label: t('subscription') }, + { icon: 'connection', label: t('integrations') }, + { icon: 'bell', label: t('notifications') }, + ]; + + // Generate Section Options + const generateOptions = [ + { icon: 'party-popper', label: t('festivities') }, + { icon: 'candle', label: t('diwali') }, + { icon: 'firework', label: t('newYear') }, + { icon: 'file-document-edit', label: t('generateScreen.templates.blogPost') }, + { icon: 'email-newsletter', label: t('generateScreen.templates.emailCampaign') }, + { icon: 'post', label: t('generateScreen.templates.socialMedia') }, + { icon: 'microphone', label: t('brandVoice') }, + { icon: 'palette', label: t('generateScreen.templates.designAssets') }, + ]; + + // Other Options + const otherOptions = [ + { icon: 'cog', label: t('settings') }, + { icon: 'translate', label: t('language') }, + { icon: 'help-circle', label: t('help') }, + { icon: 'logout', label: t('profileScreen.signOut') }, + ]; + return ( - - - {t('profile')} - navigation.navigate('Generate')} + + {/* Header with Profile Info */} + + + + {t('johnDoe')} + {t('executiveDirector')} + {t('businessInc')} + - - - - - {t('executiveDirector')} - {t('memberSince')} + + {/* Profile Section */} + + {t('profileScreen.profileSettings')} + + {profileOptions.map((option, index) => ( + + + + + + {option.label} + + + ))} - - - - - - - + {/* Generate Section */} + + {t('profileScreen.generateContent')} + + {generateOptions.map((option, index) => ( + navigation.navigate('Generate')} + > + + + + + {option.label} + + + ))} + + + + {/* Other Options Section */} + + {t('profileScreen.more')} + + {otherOptions.map((option, index) => ( + + + + + + {option.label} + + + ))} + + + ); }; const styles = StyleSheet.create({ - headerRow: { - flexDirection: 'row', - justifyContent: 'space-between', - alignItems: 'center', - }, - title: { - fontSize: 32, - fontWeight: '900', - color: colors.highlightAlt, - letterSpacing: 0.8, - }, - generateButton: { - width: 120, - height: 42, - }, - profileRow: { + header: { flexDirection: 'row', alignItems: 'center', - gap: 18, + gap: spacing.lg, + marginBottom: spacing.xxl, + paddingBottom: spacing.lg, + borderBottomWidth: 2, + borderBottomColor: colors.border, }, profileAvatar: { - width: 92, - height: 92, - borderRadius: 30, + width: 72, + height: 72, + borderRadius: borderRadius.xl, borderWidth: 3, borderColor: colors.borderStrong, }, - profileMeta: { - gap: 4, + profileInfo: { + flex: 1, + gap: spacing.xs, }, - profileTitle: { - fontSize: 17, - fontWeight: '800', + profileName: { + ...typography.h2, + fontSize: 20, color: colors.highlightAlt, - letterSpacing: 0.4, }, - profileCaption: { + profileRole: { + ...typography.bodyBold, fontSize: 14, - color: colors.textSecondary, - fontWeight: '600', - letterSpacing: 0.2, + color: colors.textPrimary, }, - actionsList: { - gap: 14, + profileCompany: { + ...typography.caption, + color: colors.textSecondary, + }, + section: { + marginBottom: spacing.xxl, + }, + sectionTitle: { + ...typography.h3, + fontSize: 18, + color: colors.highlightAlt, + marginBottom: spacing.lg, + fontWeight: '700', + }, + optionsGrid: { + flexDirection: 'row', + flexWrap: 'wrap', + gap: spacing.md, + justifyContent: 'space-between', + }, + optionCard: { + width: '31%', + minWidth: 100, + aspectRatio: 1, + backgroundColor: colors.surfaceAlt, + borderRadius: borderRadius.lg, + borderWidth: 2, + borderColor: colors.border, + padding: spacing.md, + alignItems: 'center', + justifyContent: 'center', + ...shadows.md, + }, + iconContainer: { + width: 52, + height: 52, + borderRadius: borderRadius.md, + backgroundColor: colors.surface, + borderWidth: 2, + borderColor: colors.borderStrong, + alignItems: 'center', + justifyContent: 'center', + marginBottom: spacing.sm, + }, + optionLabel: { + ...typography.caption, + fontSize: 11, + fontWeight: '700', + color: colors.highlightAlt, + textAlign: 'center', + lineHeight: 14, + paddingHorizontal: spacing.xs, }, }); diff --git a/src/screens/StrategyScreen.tsx b/src/screens/StrategyScreen.tsx index 5de83b2..fdf256b 100644 --- a/src/screens/StrategyScreen.tsx +++ b/src/screens/StrategyScreen.tsx @@ -1,85 +1 @@ -import React from 'react'; -import { StyleSheet, Text, View } from 'react-native'; -import { useTranslation } from 'react-i18next'; -import { NativeStackScreenProps } from '@react-navigation/native-stack'; -import { Screen } from '../components/Screen'; -import { SectionCard } from '../components/SectionCard'; -import { ListButton } from '../components/ListButton'; -import { TaskHeader } from '../components/TaskHeader'; -import { TasksStackParamList } from '../types/navigation'; -import { colors } from '../theme/colors'; - -type Props = NativeStackScreenProps; - -export const StrategyScreen: React.FC = ({ navigation }) => { - const { t } = useTranslation(); - - return ( - - navigation.navigate(screen)} - /> - - - - {['S', 'W', 'O', 'T'].map(letter => ( - - {letter} - - ))} - - - - - - {t('rivalExpansion')} - - - - - - - - - ); -}; - -const styles = StyleSheet.create({ - grid: { - flexDirection: 'row', - flexWrap: 'wrap', - gap: 12, - }, - gridCell: { - width: '47%', - aspectRatio: 1, - borderRadius: 20, - borderWidth: 2, - borderColor: colors.borderStrong, - backgroundColor: 'rgba(26, 64, 54, 0.92)', - alignItems: 'center', - justifyContent: 'center', - shadowColor: colors.highlight, - shadowOffset: { width: 0, height: 12 }, - shadowOpacity: 0.4, - shadowRadius: 16, - elevation: 12, - }, - gridLetter: { - fontSize: 38, - fontWeight: '900', - color: colors.highlightAlt, - letterSpacing: 1, - }, - cardBody: { - fontSize: 14, - color: colors.textSecondary, - lineHeight: 22, - }, - actionsList: { - gap: 14, - }, -}); +export { TasksScreen as StrategyScreen } from './TasksScreen'; diff --git a/src/screens/WelcomeScreen.tsx b/src/screens/WelcomeScreen.tsx index 2cc6446..cd9fe31 100644 --- a/src/screens/WelcomeScreen.tsx +++ b/src/screens/WelcomeScreen.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { StyleSheet, Text, View } from 'react-native'; +import { StyleSheet, Text, View, Image } from 'react-native'; import { useTranslation } from 'react-i18next'; import { NativeStackScreenProps } from '@react-navigation/native-stack'; import { Screen } from '../components/Screen'; @@ -7,18 +7,17 @@ import { PrimaryButton } from '../components/PrimaryButton'; import { colors } from '../theme/colors'; import { RootStackParamList } from '../types/navigation'; +const logo = require('../assets/ic_launcher_foreground.png'); + type Props = NativeStackScreenProps; export const WelcomeScreen: React.FC = ({ navigation }) => { const { t } = useTranslation(); return ( - + - - - PZ - + @@ -33,12 +32,12 @@ export const WelcomeScreen: React.FC = ({ navigation }) => { navigation.replace('MainTabs')} + onPress={() => navigation.navigate('Signup')} /> navigation.replace('MainTabs')} + onPress={() => navigation.navigate('Login')} /> @@ -54,40 +53,14 @@ const styles = StyleSheet.create({ gap: 48, }, brandMark: { - width: 130, - height: 130, - borderRadius: 42, - borderWidth: 3, - borderColor: colors.borderStrong, + width: 200, + height: 200, alignItems: 'center', justifyContent: 'center', - backgroundColor: 'rgba(6, 35, 31, 0.95)', - shadowColor: colors.highlight, - shadowOffset: { width: 0, height: 18 }, - shadowOpacity: 0.5, - shadowRadius: 28, - elevation: 16, }, - glowRing: { - position: 'absolute', - width: 120, - height: 120, - borderRadius: 38, - backgroundColor: colors.glowGold, - opacity: 0.4, - }, - brandBadge: { - width: 80, - height: 80, - borderRadius: 28, - alignItems: 'center', - justifyContent: 'center', - backgroundColor: colors.highlight, - shadowColor: colors.highlight, - shadowOffset: { width: 0, height: 8 }, - shadowOpacity: 0.6, - shadowRadius: 16, - elevation: 10, + logoImage: { + width: 200, + height: 200, }, brandInitial: { fontSize: 32,