Add "links"

overthq · Feb 10, 2024 · c94c23f · c94c23f
1 parent de17f57
commit c94c23f
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 13 deletions.
diff --git a/dashboard/src/components/global/Badge.tsx b/dashboard/src/components/global/Badge.tsx
@@ -2,10 +2,11 @@ import React from 'react';
 import { View, StyleSheet } from 'react-native';
 import Typography from './Typography';
 import useTheme from '../../hooks/useTheme';
+import { ThemeObject } from '../../styles/theme';
 
 interface BadgeProps {
 	text: string;
-	variant: 'success' | 'danger' | 'warning' | 'neutral';
+	variant: ThemeObject['badge'];
 }
 
 const Badge: React.FC<BadgeProps> = ({ text }) => {

diff --git a/dashboard/src/components/overview/QuickActions.tsx b/dashboard/src/components/overview/QuickActions.tsx
@@ -1,9 +1,13 @@
 import React from 'react';
 import { View, StyleSheet, Pressable } from 'react-native';
+import { NavigationProp, useNavigation } from '@react-navigation/native';
 import Typography from '../global/Typography';
 import { Icon } from '../Icon';
+import { MainTabParamList } from '../../types/navigation';
 
 const QuickActions = () => {
+	const { navigate } = useNavigation<NavigationProp<MainTabParamList>>();
+
 	return (
 		<View style={styles.container}>
 			<Typography
@@ -14,11 +18,11 @@ const QuickActions = () => {
 			>
 				Quick actions
 			</Typography>
-			<Pressable style={styles.row}>
+			<Pressable style={styles.row} onPress={() => navigate('Orders')}>
 				<Typography>5 orders to fulfill</Typography>
 				<Icon name='chevron-right' />
 			</Pressable>
-			<Pressable style={styles.row}>
+			<Pressable style={styles.row} onPress={() => navigate('Products')}>
 				<Typography>10 low-stock products</Typography>
 				<Icon name='chevron-right' />
 			</Pressable>

diff --git a/dashboard/src/screens/Payouts.tsx b/dashboard/src/screens/Payouts.tsx
@@ -23,13 +23,11 @@ const Payouts = () => {
 
 	React.useLayoutEffect(() => {
 		setOptions({
-			headerRight: () => {
-				return (
-					<Pressable style={{ marginRight: 16 }} onPress={handleNewPayout}>
-						<Icon name='plus' />
-					</Pressable>
-				);
-			}
+			headerRight: () => (
+				<Pressable style={{ marginRight: 16 }} onPress={handleNewPayout}>
+					<Icon name='plus' />
+				</Pressable>
+			)
 		});
 	}, []);
 
@@ -39,12 +37,16 @@ const Payouts = () => {
 
 	return (
 		<Screen style={styles.container}>
-			<Typography>Available:</Typography>
-			<Typography size='xlarge' weight='bold' style={styles.available}>
+			<Typography variant='label' weight='medium'>
+				Available
+			</Typography>
+			<Typography size='xxxlarge' weight='bold' style={styles.available}>
 				{formatNaira(50000)}
 			</Typography>
 			<RevenueBar realizedRevenue={75} unrealizedRevenue={50} payedOut={25} />
-			<Typography>Payout History</Typography>
+			<Typography variant='label' weight='medium'>
+				Payout History
+			</Typography>
 			{data.currentStore.payouts.map(payout => (
 				<PayoutRow key={payout.id} payout={payout} />
 			))}