├── .gitignore
├── README.md
├── app.json
├── app
    ├── (tabs)
    │   ├── _layout.tsx
    │   ├── index.tsx
    │   ├── profile.tsx
    │   └── settings.tsx
    └── _layout.tsx
├── assets
    ├── fonts
    │   └── SpaceMono-Regular.ttf
    ├── icons
    │   ├── add-money-wallet-icon.svg
    │   ├── amazon-outlined.svg
    │   ├── brand-uber.svg
    │   ├── bxl-airbnb.svg
    │   ├── dollar-line.svg
    │   ├── dollar-sign.svg
    │   ├── logo-figma.svg
    │   ├── netflix.svg
    │   ├── shopping-cart-line.svg
    │   ├── spotify-logo-light.svg
    │   └── wallet-credit-card.svg
    └── images
    │   ├── adaptive-icon.png
    │   ├── favicon.png
    │   ├── icon.png
    │   ├── partial-react-logo.png
    │   ├── react-logo.png
    │   ├── react-logo@2x.png
    │   ├── react-logo@3x.png
    │   └── splash.png
├── babel.config.js
├── components
    ├── ExpenseBlock.tsx
    ├── Header.tsx
    ├── IncomeBlock.tsx
    └── SpendingBlock.tsx
├── constants
    ├── Colors.ts
    └── Icons.tsx
├── data
    ├── expenses.json
    ├── income.json
    └── spending.json
├── declarations.d.ts
├── expo-env.d.ts
├── metro.config.js
├── package-lock.json
├── package.json
├── scripts
    └── reset-project.js
├── tsconfig.json
└── types.ts


/.gitignore:
--------------------------------------------------------------------------------
 1 | node_modules/
 2 | .expo/
 3 | dist/
 4 | npm-debug.*
 5 | *.jks
 6 | *.p8
 7 | *.p12
 8 | *.key
 9 | *.mobileprovision
10 | *.orig.*
11 | web-build/
12 | 
13 | # macOS
14 | .DS_Store
15 | 
16 | # @generated expo-cli sync-2b81b286409207a5da26e14c78851eb30d8ccbdb
17 | # The following patterns were generated by expo-cli
18 | 
19 | expo-env.d.ts
20 | # @end expo-cli


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <div align="center">
 2 |   <h1 align="center">Admin Dashboard</h1>
 3 | </div>
 4 | 
 5 | ![](https://github.com/user-attachments/assets/e21b48a1-7d90-4f53-93a5-3d044118a88d)
 6 | 
 7 | ## Features
 8 | It is an admin panel developed with React Native. The user can track their sales, earnings and expenses through this panel. You can go to your profile from the Profile tab. Can set up account settings from the Settings tab.
 9 | 
10 | ## Built With
11 | - **@expo/vector-icons**
12 | - **@react-navigation/native**
13 | - **expo-router**
14 |  - **expo-splash-screen**
15 | - **expo-status-bar**
16 | - **gifted-charts-core**
17 | - **lucide-react-native**
18 | - **react-native-gesture-handler**
19 | - **react-native-gifted-charts**
20 | - **react-native-reanimated**
21 | - **react-native-safe-area-context**
22 | - **react-native-screens**
23 | - **react-native-svg**
24 | 
25 | ## Getting Started
26 | To get the project up and running on your local machine, follow these steps:
27 | 
28 | Clone the repository:
29 | ````
30 | git clone https://github.com/dilarauluturhan/dashboard-react-native.git
31 | ````
32 | Go to the project directory:
33 | ````
34 | cd dashboard-react-native
35 | ````
36 | Install the required dependencies:
37 | ````
38 | npm install
39 | ````
40 | Start the application:
41 | ````
42 | npx expo start
43 | ````
44 | Go to `http://localhost:8081` in your Expo app.
45 | 
46 | ## Contact With
47 | Dilara Uluturhan - [LinkedIn](https://www.linkedin.com/in/dilarauluturhan/) - dilarauluturhan@outlook.com
48 | 


--------------------------------------------------------------------------------
/app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "expo": {
 3 |     "name": "dashboard-expo",
 4 |     "slug": "dashboard-expo",
 5 |     "version": "1.0.0",
 6 |     "orientation": "portrait",
 7 |     "icon": "./assets/images/icon.png",
 8 |     "scheme": "myapp",
 9 |     "userInterfaceStyle": "automatic",
10 |     "splash": {
11 |       "image": "./assets/images/splash.png",
12 |       "resizeMode": "contain",
13 |       "backgroundColor": "#ffffff"
14 |     },
15 |     "ios": {
16 |       "supportsTablet": true
17 |     },
18 |     "android": {
19 |       "adaptiveIcon": {
20 |         "foregroundImage": "./assets/images/adaptive-icon.png",
21 |         "backgroundColor": "#ffffff"
22 |       }
23 |     },
24 |     "web": {
25 |       "bundler": "metro",
26 |       "output": "static",
27 |       "favicon": "./assets/images/favicon.png"
28 |     },
29 |     "plugins": [
30 |       "expo-router"
31 |     ],
32 |     "experiments": {
33 |       "typedRoutes": true
34 |     }
35 |   }
36 | }
37 | 


--------------------------------------------------------------------------------
/app/(tabs)/_layout.tsx:
--------------------------------------------------------------------------------
 1 | import { View, Text } from "react-native";
 2 | import React from "react";
 3 | import { Tabs } from "expo-router";
 4 | import {
 5 |   AntDesign,
 6 |   FontAwesome,
 7 |   SimpleLineIcons,
 8 |   Ionicons,
 9 | } from "@expo/vector-icons";
10 | import Colors from "@/constants/Colors";
11 | import { StatusBar } from "expo-status-bar";
12 | 
13 | export default function Layout() {
14 |   return (
15 |     <>
16 |       <Tabs
17 |         screenOptions={{
18 |           tabBarStyle: {
19 |             backgroundColor: Colors.grey,
20 |             position: "absolute",
21 |             bottom: 40,
22 |             justifyContent: "center",
23 |             alignSelf: "center",
24 |             height: 63,
25 |             marginHorizontal: 100,
26 |             paddingHorizontal: 20,
27 |             paddingVertical: 8,
28 |             paddingBottom: 8,
29 |             borderRadius: 40,
30 |             borderWidth: 1,
31 |             borderTopWidth: 1,
32 |             borderColor: "#333",
33 |             borderTopColor: "#333",
34 |           },
35 |           tabBarShowLabel: false,
36 |           tabBarInactiveTintColor: "#999",
37 |           tabBarActiveTintColor: Colors.white,
38 |         }}
39 |       >
40 |         <Tabs.Screen
41 |           name="index"
42 |           options={{
43 |             tabBarIcon: ({ color, size, focused }) => (
44 |               <View
45 |                 style={{
46 |                   padding: 10,
47 |                   borderRadius: 30,
48 |                   backgroundColor: focused ? Colors.tintColor : Colors.grey,
49 |                 }}
50 |               >
51 |                 <SimpleLineIcons name="pie-chart" size={19} color={color} />
52 |               </View>
53 |             ),
54 |           }}
55 |         />
56 |         <Tabs.Screen
57 |           name="profile"
58 |           options={{
59 |             tabBarIcon: ({ color, size, focused }) => (
60 |               <View
61 |                 style={{
62 |                   padding: 10,
63 |                   borderRadius: 30,
64 |                   backgroundColor: focused ? Colors.tintColor : Colors.grey,
65 |                 }}
66 |               >
67 |                 <FontAwesome name="user-o" size={19} color={color} />
68 |               </View>
69 |             ),
70 |           }}
71 |         />
72 |         <Tabs.Screen
73 |           name="settings"
74 |           options={{
75 |             tabBarIcon: ({ color, size, focused }) => (
76 |               <View
77 |                 style={{
78 |                   padding: 10,
79 |                   borderRadius: 30,
80 |                   backgroundColor: focused ? Colors.tintColor : Colors.grey,
81 |                 }}
82 |               >
83 |                 <Ionicons name="settings-outline" size={24} color={color} />
84 |               </View>
85 |             ),
86 |           }}
87 |         />
88 |       </Tabs>
89 |       <StatusBar style="light" />
90 |     </>
91 |   );
92 | }
93 | 


--------------------------------------------------------------------------------
/app/(tabs)/index.tsx:
--------------------------------------------------------------------------------
 1 | import { View, Text, StyleSheet, ScrollView } from "react-native";
 2 | import React from "react";
 3 | import Colors from "@/constants/Colors";
 4 | import { Stack } from "expo-router";
 5 | import Header from "@/components/Header";
 6 | import { PieChart } from "react-native-gifted-charts";
 7 | import ExpenseBlock from "@/components/ExpenseBlock";
 8 | import ExpenseList from "@/data/expenses.json";
 9 | import IncomeBlock from "@/components/IncomeBlock";
10 | import IncomeList from "@/data/income.json";
11 | import SpendingBlock from "@/components/SpendingBlock";
12 | import SpendingList from "@/data/spending.json";
13 | 
14 | export default function Page() {
15 |   const pieData = [
16 |     {
17 |       value: 47,
18 |       color: Colors.tintColor,
19 |       focused: true,
20 |       text: "47%",
21 |     },
22 |     { value: 40, color: Colors.blue, text: "40%" },
23 |     { value: 16, color: Colors.white, text: "16%" },
24 |     { value: 7, color: Colors.grey, text: "16%" },
25 |   ];
26 |   return (
27 |     <>
28 |       <Stack.Screen
29 |         options={{
30 |           header: () => <Header />,
31 |         }}
32 |       />
33 |       <View style={[styles.container, { paddingTop: 75 }]}>
34 |         <ScrollView showsVerticalScrollIndicator={false}>
35 |           <View
36 |             style={{ flexDirection: "row", justifyContent: "space-between" }}
37 |           >
38 |             <View style={{ gap: 10 }}>
39 |               <Text
40 |                 style={{ color: Colors.white, fontSize: 14, fontWeight: 500 }}
41 |               >
42 |                 My <Text style={{fontWeight:700}}>Earning</Text>
43 |               </Text>
44 |               <Text
45 |                 style={{ color: Colors.white, fontSize: 36, fontWeight: 700 }}
46 |               >
47 |                 $7000.<Text style={{ fontSize: 24, fontWeight: 400 }}>77</Text>
48 |               </Text>
49 |             </View>
50 |             <View style={{ paddingVertical: 20, alignItems: "center" }}>
51 |               <PieChart
52 |                 data={pieData}
53 |                 donut
54 |                 showGradient
55 |                 sectionAutoFocus
56 |                 // focusOnPress
57 |                 semiCircle
58 |                 radius={70}
59 |                 innerRadius={55}
60 |                 innerCircleColor={Colors.black}
61 |                 centerLabelComponent={() => {
62 |                   return (
63 |                     <View
64 |                       style={{ justifyContent: "center", alignItems: "center" }}
65 |                     >
66 |                       <Text
67 |                         style={{
68 |                           fontSize: 22,
69 |                           color: "white",
70 |                           fontWeight: "bold",
71 |                         }}
72 |                       >
73 |                         77%
74 |                       </Text>
75 |                     </View>
76 |                   );
77 |                 }}
78 |               />
79 |             </View>
80 |           </View>
81 | 
82 |           <ExpenseBlock expenseList={ExpenseList} />
83 |           <IncomeBlock incomeList={IncomeList} />
84 |           <SpendingBlock spendingList={SpendingList}/>
85 |         </ScrollView>
86 |       </View>
87 |     </>
88 |   );
89 | }
90 | 
91 | const styles = StyleSheet.create({
92 |   container: {
93 |     flex: 1,
94 |     backgroundColor: Colors.black,
95 |     paddingHorizontal: 20,
96 |   },
97 | });
98 | 


--------------------------------------------------------------------------------
/app/(tabs)/profile.tsx:
--------------------------------------------------------------------------------
  1 | import {
  2 |   View,
  3 |   Text,
  4 |   StyleSheet,
  5 |   SafeAreaView,
  6 |   Image,
  7 |   TouchableOpacity,
  8 | } from "react-native";
  9 | import React from "react";
 10 | import Colors from "@/constants/Colors";
 11 | import { Stack } from "expo-router";
 12 | import {
 13 |   FontAwesome,
 14 |   Ionicons,
 15 |   MaterialCommunityIcons,
 16 |   SimpleLineIcons,
 17 | } from "@expo/vector-icons";
 18 | 
 19 | export default function Page() {
 20 |   return (
 21 |     <>
 22 |       <Stack.Screen options={{ headerShown: false }} />
 23 |       <View style={styles.container}>
 24 |         <SafeAreaView style={styles.safeArea}>
 25 |           <View style={styles.topSection}>
 26 |             <View style={styles.propicArea}>
 27 |               <Image
 28 |                 source={{ uri: "https://i.pravatar.cc/250?img=10" }}
 29 |                 style={styles.propic}
 30 |               />
 31 |             </View>
 32 |             <Text style={styles.text}>Dilotabi</Text>
 33 |           </View>
 34 | 
 35 |           <View>
 36 |             <TouchableOpacity style={styles.btnSection} activeOpacity={0.7}>
 37 |               <View style={styles.btnArea}>
 38 |                 <FontAwesome name="user-o" size={22} color={Colors.white} />
 39 |                 <Text style={styles.btnText}>Account</Text>
 40 |               </View>
 41 |             </TouchableOpacity>
 42 | 
 43 |             <TouchableOpacity style={styles.btnSection} activeOpacity={0.7}>
 44 |               <View style={styles.btnArea}>
 45 |                 <Ionicons
 46 |                   name="notifications-outline"
 47 |                   size={24}
 48 |                   color={Colors.white}
 49 |                 />
 50 |                 <Text style={styles.btnText}>Notifications</Text>
 51 |               </View>
 52 |             </TouchableOpacity>
 53 | 
 54 |             <TouchableOpacity style={styles.btnSection} activeOpacity={0.7}>
 55 |               <View style={styles.btnArea}>
 56 |                 <Ionicons
 57 |                   name="settings-outline"
 58 |                   size={24}
 59 |                   color={Colors.white}
 60 |                 />
 61 |                 <Text style={styles.btnText}>Settings</Text>
 62 |               </View>
 63 |             </TouchableOpacity>
 64 | 
 65 |             <TouchableOpacity style={styles.btnSection} activeOpacity={0.7}>
 66 |               <View style={styles.btnArea}>
 67 |                 <MaterialCommunityIcons
 68 |                   name="help-circle-outline"
 69 |                   size={25}
 70 |                   color={Colors.white}
 71 |                 />
 72 |                 <Text style={styles.btnText}>Help</Text>
 73 |               </View>
 74 |             </TouchableOpacity>
 75 | 
 76 |             <TouchableOpacity style={styles.btnSection} activeOpacity={0.7}>
 77 |               <View style={styles.btnArea}>
 78 |                 <SimpleLineIcons name="logout" size={23} color={Colors.white} />
 79 |                 <Text style={styles.btnText}>Logout</Text>
 80 |               </View>
 81 |             </TouchableOpacity>
 82 |           </View>
 83 |         </SafeAreaView>
 84 |       </View>
 85 |     </>
 86 |   );
 87 | }
 88 | 
 89 | const styles = StyleSheet.create({
 90 |   container: {
 91 |     flex: 1,
 92 |     backgroundColor: Colors.black,
 93 |   },
 94 |   safeArea: {
 95 |     flex: 1,
 96 |   },
 97 |   topSection: {
 98 |     height: 300,
 99 |     justifyContent: "center",
100 |     alignItems: "center",
101 |   },
102 |   propicArea: {
103 |     width: 150,
104 |     height: 150,
105 |     borderRadius: 100,
106 |     borderWidth: 5,
107 |     borderColor: Colors.tintColor,
108 |   },
109 |   propic: {
110 |     width: "100%",
111 |     height: "100%",
112 |     borderRadius: 100,
113 |   },
114 |   text: {
115 |     color: Colors.white,
116 |     fontSize: 32,
117 |     marginTop: 20,
118 |   },
119 |   btnText: {
120 |     color: Colors.white,
121 |     fontSize: 17,
122 |   },
123 |   btnSection: {
124 |     paddingHorizontal: 25,
125 |     marginBottom: 12,
126 |   },
127 |   btnArea: {
128 |     paddingHorizontal: 15,
129 |     paddingVertical: 13,
130 |     flexDirection: "row",
131 |     alignItems: "center",
132 |     gap: 15,
133 |     borderColor: Colors.grey,
134 |     borderWidth: 1,
135 |     borderRadius: 100,
136 |     marginBottom: 7,
137 |   },
138 | });
139 | 


--------------------------------------------------------------------------------
/app/(tabs)/settings.tsx:
--------------------------------------------------------------------------------
  1 | import {
  2 |   View,
  3 |   Text,
  4 |   StyleSheet,
  5 |   SafeAreaView,
  6 |   TouchableOpacity,
  7 |   ScrollView,
  8 | } from "react-native";
  9 | import React from "react";
 10 | import Colors from "@/constants/Colors";
 11 | import { Stack } from "expo-router";
 12 | import { AntDesign } from "@expo/vector-icons";
 13 | 
 14 | export default function Page() {
 15 |   const accountItems = [
 16 |     { icon: "meh", text: "Edit Profile" },
 17 |     { icon: "Safety", text: "Security" },
 18 |     { icon: "bells", text: "Notifications" },
 19 |     { icon: "lock", text: "Privacy" },
 20 |   ];
 21 | 
 22 |   const supportItems = [
 23 |     { icon: "creditcard", text: "My Subscription" },
 24 |     { icon: "questioncircleo", text: "Help & Support" },
 25 |     { icon: "infocirlceo", text: "Terms & Policies" },
 26 |   ];
 27 | 
 28 |   const cacheAndCellularItems = [
 29 |     { icon: "delete", text: "Free Up Space" },
 30 |     { icon: "save", text: "Date Saver" },
 31 |   ];
 32 | 
 33 |   const dashboardItems = [
 34 |     { icon: "flag", text: "Report a Problem" },
 35 |     { icon: "adduser", text: "Add Account" },
 36 |     { icon: "logout", text: "Log out" },
 37 |   ];
 38 | 
 39 |   const renderSettingsItem = ({
 40 |     icon,
 41 |     text,
 42 |   }: {
 43 |     icon: string;
 44 |     text: string;
 45 |   }) => (
 46 |     <TouchableOpacity
 47 |       onPress={() => {}}
 48 |       style={{
 49 |         flexDirection: "row",
 50 |         alignItems: "center",
 51 |         paddingVertical: 8,
 52 |         paddingLeft: 30,
 53 |       }}
 54 |     >
 55 |       <AntDesign name={icon} size={24} color={Colors.white} />
 56 |       <Text
 57 |         style={{
 58 |           color: Colors.white,
 59 |           marginLeft: 10,
 60 |           fontWeight: 600,
 61 |           fontSize: 16,
 62 |         }}
 63 |       >
 64 |         {text}
 65 |       </Text>
 66 |     </TouchableOpacity>
 67 |   );
 68 |   return (
 69 |     <>
 70 |       <Stack.Screen options={{ headerShown: false }} />
 71 |       <SafeAreaView style={styles.container}>
 72 |         <ScrollView style={{ marginHorizontal: 12 }}>
 73 |           {/* Account */}
 74 |           <View style={styles.wrapper}>
 75 |             <View
 76 |               style={{
 77 |                 borderColor: Colors.grey,
 78 |                 borderWidth: 1,
 79 |                 borderRadius: 100,
 80 |                 marginBottom: 7,
 81 |               }}
 82 |             >
 83 |               <Text
 84 |                 style={{
 85 |                   color: Colors.white,
 86 |                   paddingVertical: 12,
 87 |                   paddingLeft: 22,
 88 |                   fontSize: 20,
 89 |                   fontWeight: 600,
 90 |                   paddingHorizontal: 12,
 91 |                 }}
 92 |               >
 93 |                 Account
 94 |               </Text>
 95 |             </View>
 96 |             <View>
 97 |               {accountItems.map((item, index) => (
 98 |                 <React.Fragment key={index}>
 99 |                   {renderSettingsItem(item)}
100 |                 </React.Fragment>
101 |               ))}
102 |             </View>
103 |           </View>
104 | 
105 |           {/* Support and About */}
106 |           <View style={styles.wrapper}>
107 |             <View
108 |               style={{
109 |                 borderColor: Colors.grey,
110 |                 borderWidth: 1,
111 |                 borderRadius: 100,
112 |                 marginBottom: 7,
113 |               }}
114 |             >
115 |               <Text
116 |                 style={{
117 |                   color: Colors.white,
118 |                   paddingVertical: 12,
119 |                   paddingLeft: 22,
120 |                   fontSize: 20,
121 |                   fontWeight: 600,
122 |                   paddingHorizontal: 12,
123 |                 }}
124 |               >
125 |                 Support & About
126 |               </Text>
127 |             </View>
128 |             <View>
129 |               {supportItems.map((item, index) => (
130 |                 <React.Fragment key={index}>
131 |                   {renderSettingsItem(item)}
132 |                 </React.Fragment>
133 |               ))}
134 |             </View>
135 |           </View>
136 | 
137 |           {/* Cache And Cellular */}
138 |           <View style={styles.wrapper}>
139 |             <View
140 |               style={{
141 |                 borderColor: Colors.grey,
142 |                 borderWidth: 1,
143 |                 borderRadius: 100,
144 |                 marginBottom: 7,
145 |               }}
146 |             >
147 |               <Text
148 |                 style={{
149 |                   color: Colors.white,
150 |                   paddingVertical: 12,
151 |                   paddingLeft: 22,
152 |                   fontSize: 20,
153 |                   fontWeight: 600,
154 |                   paddingHorizontal: 12,
155 |                 }}
156 |               >
157 |                 Cache And Cellular
158 |               </Text>
159 |             </View>
160 |             <View>
161 |               {cacheAndCellularItems.map((item, index) => (
162 |                 <React.Fragment key={index}>
163 |                   {renderSettingsItem(item)}
164 |                 </React.Fragment>
165 |               ))}
166 |             </View>
167 |           </View>
168 | 
169 |           {/* Dashboard Settings */}
170 |           <View style={styles.wrapper}>
171 |             <View
172 |               style={{
173 |                 borderColor: Colors.grey,
174 |                 borderWidth: 1,
175 |                 borderRadius: 100,
176 |                 marginBottom: 7,
177 |               }}
178 |             >
179 |               <Text
180 |                 style={{
181 |                   color: Colors.white,
182 |                   paddingVertical: 12,
183 |                   paddingLeft: 22,
184 |                   fontSize: 20,
185 |                   fontWeight: 600,
186 |                   paddingHorizontal: 12,
187 |                 }}
188 |               >
189 |                 Dashboard Settings
190 |               </Text>
191 |             </View>
192 |             <View>
193 |               {dashboardItems.map((item, index) => (
194 |                 <React.Fragment key={index}>
195 |                   {renderSettingsItem(item)}
196 |                 </React.Fragment>
197 |               ))}
198 |             </View>
199 |           </View>
200 |         </ScrollView>
201 |       </SafeAreaView>
202 |     </>
203 |   );
204 | }
205 | 
206 | const styles = StyleSheet.create({
207 |   container: {
208 |     flex: 1,
209 |     backgroundColor: Colors.black,
210 |   },
211 |   wrapper: {
212 |     marginBottom: 12,
213 |   },
214 | });
215 | 


--------------------------------------------------------------------------------
/app/_layout.tsx:
--------------------------------------------------------------------------------
 1 | import { useFonts } from "expo-font";
 2 | import { Stack } from "expo-router";
 3 | import * as SplashScreen from "expo-splash-screen";
 4 | import { useEffect } from "react";
 5 | import "react-native-reanimated";
 6 | 
 7 | SplashScreen.preventAutoHideAsync();
 8 | 
 9 | export default function RootLayout() {
10 |   const [loaded] = useFonts({
11 |     SpaceMono: require("../assets/fonts/SpaceMono-Regular.ttf"),
12 |   });
13 | 
14 |   useEffect(() => {
15 |     if (loaded) {
16 |       SplashScreen.hideAsync();
17 |     }
18 |   }, [loaded]);
19 | 
20 |   if (!loaded) {
21 |     return null;
22 |   }
23 | 
24 |   return (
25 |     <Stack>
26 |       <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
27 |     </Stack>
28 |   );
29 | }
30 | 


--------------------------------------------------------------------------------
/assets/fonts/SpaceMono-Regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dilarauluturhan/dashboard-react-native/68c6ca3c0a96dc58b53c30de6e2f5aec4fe3311a/assets/fonts/SpaceMono-Regular.ttf


--------------------------------------------------------------------------------
/assets/icons/add-money-wallet-icon.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" fill="currentColor" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 474 512.27"><path fill="currentColor" d="M352.84 253.82h67.5v-13.06c-3.86-14.29-10-23.98-17.97-29.88-7.94-5.88-18.27-8.4-30.38-8.31l-283.53.06c-6.81 0-12.33-5.52-12.33-12.34 0-6.81 5.52-12.33 12.33-12.33l39.5.01c-4.21-6.56-7.76-13.57-10.59-20.95-1.57-4.17-2.93-8.39-4.05-12.72H66.73c-11.55 0-22.07 4.74-29.7 12.37-7.62 7.62-12.36 18.14-12.36 29.7v259.16c0 11.54 4.75 22.06 12.38 29.68 7.6 7.66 18.13 12.39 29.68 12.39h311.54c11.54 0 22.06-4.75 29.7-12.37 7.62-7.64 12.37-18.17 12.37-29.7v-36.97h-67.5c-20.85 0-39.8-8.53-53.5-22.24l-1.29-1.4c-12.96-13.64-20.95-32.01-20.95-52.1v-3.26c0-20.75 8.52-39.67 22.24-53.42l.13-.13c13.75-13.69 32.64-22.19 53.37-22.19zm92.17.7c7.11 1.42 13.48 4.94 18.42 9.88 6.51 6.51 10.57 15.53 10.57 25.46v81.12c0 10.27-4.23 19.66-11.07 26.51a37.281 37.281 0 0 1-17.92 10.07v37.97c0 18.29-7.54 34.97-19.63 47.06l-.05.05c-12.09 12.09-28.77 19.63-47.06 19.63H66.73c-18.28 0-34.98-7.53-47.1-19.64C7.52 480.57 0 463.89 0 445.53V186.37c0-18.37 7.51-35.06 19.59-47.15 12.08-12.08 28.77-19.59 47.14-19.59h43.08c-.05-1.32-.07-2.65-.07-3.99 0-31.9 12.96-60.83 34-81.91 45.05-44.92 118.69-45.02 163.72 0l1.11 1.21c20.31 20.9 32.82 49.37 32.82 80.7 0 1.34-.03 2.67-.07 3.99h36.95c18.31 0 34.99 7.53 47.09 19.63 12.12 12.07 19.65 28.78 19.65 47.11v68.15zm-121.85-76.53h48.5c17.41-.16 32.75 3.8 45.36 13.15 1.13.84 2.24 1.72 3.32 2.64v-7.41c0-11.52-4.75-22.05-12.39-29.69-7.59-7.65-18.1-12.38-29.68-12.38H337.8c-1.1 4.34-2.46 8.59-4.04 12.72-2.82 7.4-6.38 14.4-10.6 20.97zM206.69 64.7c-.04-4.81-.49-8.26 5.49-8.17l24.46.23c6.23-.03 7.89 1.95 7.82 7.79v23.16h23.01c4.81-.03 8.25-.48 8.16 5.49l-.23 24.46c.03 6.24-1.94 7.9-7.79 7.83h-23.15v23.14c.07 5.85-1.59 7.83-7.82 7.79l-24.46.23c-5.98.09-5.53-3.35-5.49-8.16v-23h-23.16c-5.85.07-7.83-1.6-7.79-7.83l-.23-24.46c-.1-5.97 3.35-5.52 8.16-5.49h23.02V64.7zm18.88-45.25c53.12 0 96.18 43.06 96.18 96.19 0 24.7-9.32 47.23-24.63 64.26H154c-15.31-17.03-24.62-39.56-24.62-64.26 0-53.13 43.06-96.19 96.19-96.19zm133.52 280.81c8.13 0 15.51 3.31 20.85 8.66 5.38 5.38 8.69 12.76 8.69 20.89 0 8.12-3.31 15.5-8.65 20.85-5.38 5.38-12.76 8.69-20.89 8.69-8.12 0-15.49-3.31-20.85-8.65l-.06-.06c-5.34-5.36-8.63-12.73-8.63-20.83 0-8.12 3.31-15.5 8.65-20.85l.06-.06c5.35-5.33 12.72-8.64 20.83-8.64z"/></svg>


--------------------------------------------------------------------------------
/assets/icons/amazon-outlined.svg:
--------------------------------------------------------------------------------
1 | <svg width="256px" height="256px" viewBox="0 0 1024 1024" fill="currentColor" x="128" y="128" role="img" style="display:inline-block;vertical-align:middle" xmlns="http://www.w3.org/2000/svg"><g fill="currentColor"><path fill="currentColor" d="M825 768.9c-3.3-.9-7.3-.4-11.9 1.3c-61.6 28.2-121.5 48.3-179.7 60.2C507.7 856 385.2 842.6 266 790.3c-33.1-14.6-79.1-39.2-138-74a9.36 9.36 0 0 0-5.3-2c-2-.1-3.7.1-5.3.9c-1.6.8-2.8 1.8-3.7 3.1c-.9 1.3-1.1 3.1-.4 5.4c.6 2.2 2.1 4.7 4.6 7.4c10.4 12.2 23.3 25.2 38.6 39s35.6 29.4 60.9 46.8c25.3 17.4 51.8 32.9 79.3 46.4c27.6 13.5 59.6 24.9 96.1 34.1s73 13.8 109.4 13.8c36.2 0 71.4-3.7 105.5-10.9c34.2-7.3 63-15.9 86.5-25.9c23.4-9.9 45-21 64.8-33c19.8-12 34.4-22.2 43.9-30.3c9.5-8.2 16.3-14.6 20.2-19.4c4.6-5.7 6.9-10.6 6.9-14.9c.1-4.5-1.7-7.1-5-7.9zM527.4 348.1c-15.2 1.3-33.5 4.1-55 8.3c-21.5 4.1-41.4 9.3-59.8 15.4s-37.2 14.6-56.3 25.4c-19.2 10.8-35.5 23.2-49 37s-24.5 31.1-33.1 52c-8.6 20.8-12.9 43.7-12.9 68.7c0 27.1 4.7 51.2 14.3 72.5c9.5 21.3 22.2 38 38.2 50.4c15.9 12.4 34 22.1 54 29.2c20 7.1 41.2 10.3 63.2 9.4c22-.9 43.5-4.3 64.4-10.3c20.8-5.9 40.4-15.4 58.6-28.3c18.2-12.9 33.1-28.2 44.8-45.7c4.3 6.6 8.1 11.5 11.5 14.7l8.7 8.9c5.8 5.9 14.7 14.6 26.7 26.1c11.9 11.5 24.1 22.7 36.3 33.7l104.4-99.9l-6-4.9c-4.3-3.3-9.4-8-15.2-14.3c-5.8-6.2-11.6-13.1-17.2-20.5c-5.7-7.4-10.6-16.1-14.7-25.9c-4.1-9.8-6.2-19.3-6.2-28.5V258.7c0-10.1-1.9-21-5.7-32.8c-3.9-11.7-10.7-24.5-20.7-38.3c-10-13.8-22.4-26.2-37.2-37c-14.9-10.8-34.7-20-59.6-27.4c-24.8-7.4-52.6-11.1-83.2-11.1c-31.3 0-60.4 3.7-87.6 10.9c-27.1 7.3-50.3 17-69.7 29.2c-19.3 12.2-35.9 26.3-49.7 42.4c-13.8 16.1-24.1 32.9-30.8 50.4c-6.7 17.5-10.1 35.2-10.1 53.1L408 310c5.5-16.4 12.9-30.6 22-42.8c9.2-12.2 17.9-21 25.8-26.5c8-5.5 16.6-9.9 25.7-13.2c9.2-3.3 15.4-5 18.6-5.4c3.2-.3 5.7-.4 7.6-.4c26.7 0 45.2 7.9 55.6 23.6c6.5 9.5 9.7 23.9 9.7 43.3v56.6c-15.2.6-30.4 1.6-45.6 2.9zM573.1 500c0 16.6-2.2 31.7-6.5 45c-9.2 29.1-26.7 47.4-52.4 54.8c-22.4 6.6-43.7 3.3-63.9-9.8c-21.5-14-32.2-33.8-32.2-59.3c0-19.9 5-36.9 15-51.1c10-14.1 23.3-24.7 40-31.7s33-12 49-14.9c15.9-3 33-4.8 51-5.4V500zm335.2 218.9c-4.3-5.4-15.9-8.9-34.9-10.7c-19-1.8-35.5-1.7-49.7.4c-15.3 1.8-31.1 6.2-47.3 13.4c-16.3 7.1-23.4 13.1-21.6 17.8l.7 1.3l.9.7l1.4.2h4.6c.8 0 1.8-.1 3.2-.2c1.4-.1 2.7-.3 3.9-.4c1.2-.1 2.9-.3 5.1-.4c2.1-.1 4.1-.4 6-.7c.3 0 3.7-.3 10.3-.9c6.6-.6 11.4-1 14.3-1.3c2.9-.3 7.8-.6 14.5-.9c6.7-.3 12.1-.3 16.1 0c4 .3 8.5.7 13.6 1.1c5.1.4 9.2 1.3 12.4 2.7c3.2 1.3 5.6 3 7.1 5.1c5.2 6.6 4.2 21.2-3 43.9s-14 40.8-20.4 54.2c-2.8 5.7-2.8 9.2 0 10.7s6.7.1 11.9-4c15.6-12.2 28.6-30.6 39.1-55.3c6.1-14.6 10.5-29.8 13.1-45.7c2.4-15.9 2-26.2-1.3-31z"/></g></svg>


--------------------------------------------------------------------------------
/assets/icons/brand-uber.svg:
--------------------------------------------------------------------------------
1 | <svg width="256px" height="256px" viewBox="0 0 24 24" fill="currentColor" x="128" y="128" role="img" style="display:inline-block;vertical-align:middle" xmlns="http://www.w3.org/2000/svg"><g fill="currentColor"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"><path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0-18 0"/><path d="M9 10a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1zm-6 2h6"/></g></g></svg>


--------------------------------------------------------------------------------
/assets/icons/bxl-airbnb.svg:
--------------------------------------------------------------------------------
1 | <svg width="256px" height="256px" viewBox="0 0 24 24" fill="currentColor" x="128" y="128" role="img" style="display:inline-block;vertical-align:middle" xmlns="http://www.w3.org/2000/svg"><g fill="currentColor"><path d="M12.001 16.709c-1.013-1.271-1.609-2.386-1.808-3.34c-.197-.769-.12-1.385.218-1.848c.357-.532.89-.791 1.589-.791s1.231.259 1.589.796c.335.458.419 1.075.215 1.848c-.218.974-.813 2.087-1.808 3.341l.005-.006zm7.196.855c-.14.934-.775 1.708-1.65 2.085c-1.687.734-3.359-.437-4.789-2.026c2.365-2.961 2.803-5.268 1.787-6.758c-.596-.855-1.449-1.271-2.544-1.271c-2.206 0-3.419 1.867-2.942 4.034c.276 1.173 1.013 2.506 2.186 3.996c-.735.813-1.432 1.391-2.047 1.748c-.478.258-.934.418-1.37.456c-2.008.299-3.582-1.647-2.867-3.656c.1-.259.297-.734.634-1.471l.019-.039c1.097-2.382 2.43-5.088 3.961-8.09l.039-.1l.435-.836c.338-.616.477-.892 1.014-1.231c.258-.157.576-.235.934-.235c.715 0 1.271.418 1.511.753c.118.18.259.419.436.716l.419.815l.06.119c1.53 3.001 2.863 5.702 3.955 8.089l.02.019l.401.915l.237.573c.183.459.221.915.16 1.393l.001.002zm.913-1.791c-.139-.438-.378-.953-.675-1.569v-.022a262.99 262.99 0 0 0-3.976-8.128l-.084-.121C14.486 4.109 13.849 3.014 12 3.014c-1.827 0-2.604 1.27-3.397 2.922l-.061.119c-1.251 2.426-2.564 5.128-3.975 8.13v.039l-.418.914c-.158.378-.237.575-.259.636C2.878 18.556 4.964 21 7.489 21c.021 0 .099 0 .198-.021h.278c1.313-.159 2.664-.993 4.035-2.485c1.371 1.49 2.725 2.326 4.033 2.485h.279c.1.021.18.021.2.021c2.525.002 4.61-2.444 3.598-5.227z" fill="currentColor"/></g></svg>


--------------------------------------------------------------------------------
/assets/icons/dollar-line.svg:
--------------------------------------------------------------------------------
1 | <svg width="256px" height="256px" viewBox="0 0 36 36" fill="currentColor" x="128" y="128" role="img" style="display:inline-block;vertical-align:middle" xmlns="http://www.w3.org/2000/svg"><g fill="currentColor"><path fill="currentColor" d="M26 21.15a6.91 6.91 0 0 0-4.38-3.32a26 26 0 0 0-2.62-.64V8.12A10.05 10.05 0 0 1 23.86 10a1 1 0 0 0 1.33-1.5A11.75 11.75 0 0 0 19 6.1V3a1 1 0 0 0-2 0v3c-4.4.1-6.83 2.29-7.57 4.18A5.56 5.56 0 0 0 11.66 17A13.2 13.2 0 0 0 17 18.84V28a12.3 12.3 0 0 1-7.14-2.74a1 1 0 1 0-1.37 1.44A14.09 14.09 0 0 0 17 30v3a1 1 0 0 0 2 0v-3c2.82-.19 6.07-1.09 7.3-4.76a5.33 5.33 0 0 0-.3-4.09Zm-13.21-5.83a3.57 3.57 0 0 1-1.49-4.39c.11-.3 1.23-2.81 5.7-2.93v8.8a10.7 10.7 0 0 1-4.21-1.48Zm11.61 9.24c-.72 2.14-2.32 3.17-5.4 3.4v-8.73c.64.14 1.3.3 2 .51a5 5 0 0 1 3.19 2.32a3.34 3.34 0 0 1 .21 2.5Z" class="clr-i-outline clr-i-outline-path-1"/><path fill="none" d="M0 0h36v36H0z"/></g></svg>


--------------------------------------------------------------------------------
/assets/icons/dollar-sign.svg:
--------------------------------------------------------------------------------
1 | <svg width="256px" height="256px" viewBox="0 0 24 24" fill="currentColor" x="128" y="128" role="img" style="display:inline-block;vertical-align:middle" xmlns="http://www.w3.org/2000/svg"><g fill="currentColor"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 1v22m5-18H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></g></svg>


--------------------------------------------------------------------------------
/assets/icons/logo-figma.svg:
--------------------------------------------------------------------------------
1 | <svg width="256px" height="256px" viewBox="0 0 32 32" fill="currentColor" x="128" y="128" role="img" style="display:inline-block;vertical-align:middle" xmlns="http://www.w3.org/2000/svg"><g fill="currentColor"><path fill="currentColor" d="M23.6 11.6c1-.6 1.7-1.5 2.1-2.6c.4-1.1.4-2.2.1-3.3c-.3-1.1-1-2-1.9-2.7c-.9-.7-2.1-1-3.2-1h-9.2c-1.2 0-2.3.4-3.2 1c-1.1.7-1.7 1.7-2.1 2.7c-.3 1.1-.3 2.3.1 3.3c.4 1.1 1.1 2 2.1 2.6c-.7.5-1.4 1.1-1.8 1.9c-.4.8-.6 1.6-.6 2.5c0 .9.2 1.7.6 2.5c.4.8 1 1.4 1.8 1.9c-1 .6-1.7 1.5-2.1 2.6c-.4 1.1-.4 2.2-.1 3.3c.3 1.1 1 2 2 2.7c.9.7 2.1 1 3.2 1c1.4 0 2.8-.6 3.9-1.5c1-1 1.6-2.3 1.6-3.7V20c1 .9 2.3 1.4 3.6 1.4h.1c1.2 0 2.3-.4 3.2-1c.9-.7 1.6-1.6 1.9-2.7c.3-1.1.3-2.2-.1-3.3c-.3-1.3-1.1-2.2-2-2.8zm-6.7-7.9h3.7c.5 0 1 0 1.4.2c.5.2.9.4 1.2.8c.4.3.6.7.8 1.2s.3.9.3 1.4c0 .5-.1 1-.3 1.4c-.2.4-.5.8-.8 1.2c-.4.3-.8.6-1.2.8c-.5.2-1 .2-1.4.2h-3.7V3.7zm-5.5 0h3.7v7h-3.7c-.9 0-1.8-.4-2.4-1.1c-.7-.6-1-1.5-1-2.4s.4-1.8 1-2.4c.6-.6 1.5-1 2.4-1.1zM7.8 16c0-.9.4-1.8 1.1-2.5c.7-.7 1.6-1 2.6-1h3.7v7h-3.7c-1 0-1.9-.4-2.6-1c-.7-.7-1.1-1.6-1.1-2.5zm7.3 8.7c0 1-.4 1.9-1.1 2.5c-.7.7-1.6 1-2.6 1c-.5 0-1 0-1.4-.2c-.5-.2-.9-.4-1.2-.7c-.4-.3-.6-.7-.8-1.2c-.2-.4-.3-.9-.3-1.4c0-.5.1-1 .3-1.4c.2-.4.5-.8.8-1.2c.4-.3.8-.6 1.2-.8c.5-.2 1-.2 1.4-.2h3.7v3.6zm5.5-5.2h-.1c-.9 0-1.8-.4-2.4-1.1c-.6-.7-1-1.5-1-2.4c0-.9.4-1.8 1-2.4c.6-.7 1.5-1 2.4-1.1h.1c.5 0 1 0 1.4.2c.5.2.9.4 1.2.8c.4.3.6.7.8 1.2c.2.4.3.9.3 1.4c0 .5-.1 1-.3 1.4c-.2.4-.5.8-.8 1.2c-.4.3-.8.6-1.2.8h-1.4z"/></g></svg>


--------------------------------------------------------------------------------
/assets/icons/netflix.svg:
--------------------------------------------------------------------------------
1 | <svg width="256px" height="256px" viewBox="0 0 48 48" fill="currentColor" x="128" y="128" role="img" style="display:inline-block;vertical-align:middle" xmlns="http://www.w3.org/2000/svg"><g fill="currentColor"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2" stroke-linejoin="round" d="M29 25.75V5l8.4-.5v39L29 43M19 22.25V43l-8.4.5v-39h0L19 5m-.02 0l18.44 38.5m-26.84-39L29.02 43"/></g></svg>


--------------------------------------------------------------------------------
/assets/icons/shopping-cart-line.svg:
--------------------------------------------------------------------------------
1 | <svg width="256px" height="256px" viewBox="0 0 36 36" fill="currentColor" x="128" y="128" role="img" style="display:inline-block;vertical-align:middle" xmlns="http://www.w3.org/2000/svg"><g fill="currentColor"><circle cx="13.33" cy="29.75" r="2.25" fill="currentColor" class="clr-i-outline clr-i-outline-path-1"/><circle cx="27" cy="29.75" r="2.25" fill="currentColor" class="clr-i-outline clr-i-outline-path-2"/><path fill="currentColor" d="M33.08 5.37a1 1 0 0 0-.77-.37H11.49l.65 2H31l-2.67 12h-15L8.76 4.53a1 1 0 0 0-.66-.65L4 2.62a1 1 0 1 0-.59 1.92L7 5.64l4.59 14.5l-1.64 1.34l-.13.13A2.66 2.66 0 0 0 9.74 25A2.75 2.75 0 0 0 12 26h16.69a1 1 0 0 0 0-2H11.84a.67.67 0 0 1-.56-1l2.41-2h15.44a1 1 0 0 0 1-.78l3.17-14a1 1 0 0 0-.22-.85Z" class="clr-i-outline clr-i-outline-path-3"/><path fill="none" d="M0 0h36v36H0z"/></g></svg>


--------------------------------------------------------------------------------
/assets/icons/spotify-logo-light.svg:
--------------------------------------------------------------------------------
1 | <svg width="256px" height="256px" viewBox="0 0 256 256" fill="currentColor" x="128" y="128" role="img" style="display:inline-block;vertical-align:middle" xmlns="http://www.w3.org/2000/svg"><g fill="currentColor"><path fill="currentColor" d="M128 26a102 102 0 1 0 102 102A102.12 102.12 0 0 0 128 26Zm0 192a90 90 0 1 1 90-90a90.1 90.1 0 0 1-90 90Zm29.31-49.2a6 6 0 0 1-8.11 2.51a44.75 44.75 0 0 0-42.4 0a6 6 0 1 1-5.6-10.62a57.37 57.37 0 0 1 53.6 0a6 6 0 0 1 2.51 8.11Zm32-56a6 6 0 0 1-8.12 2.46a112.67 112.67 0 0 0-106.34 0a6 6 0 1 1-5.66-10.58a124.65 124.65 0 0 1 117.66 0a6 6 0 0 1 2.44 8.14Zm-16 28A6 6 0 0 1 168 144a6.07 6.07 0 0 1-2.82-.7a79 79 0 0 0-74.36 0a6 6 0 1 1-5.64-10.6a91 91 0 0 1 85.64 0a6 6 0 0 1 2.48 8.12Z"/></g></svg>


--------------------------------------------------------------------------------
/assets/icons/wallet-credit-card.svg:
--------------------------------------------------------------------------------
1 | <svg width="256px" height="256px" viewBox="0 0 20 20" fill="currentColor" x="128" y="128" role="img" style="display:inline-block;vertical-align:middle" xmlns="http://www.w3.org/2000/svg"><g fill="currentColor"><path fill="currentColor" d="M10.002 1.642a1.5 1.5 0 0 1 2.175-.307l3.27 2.655A1.5 1.5 0 0 1 15.741 6h-1.22l.39-.559a.5.5 0 0 0-.094-.675L13.133 3.4L11.337 6H10.12l2.234-3.232l-.808-.656a.5.5 0 0 0-.725.102L8.18 5.999H6.96l3.042-4.357ZM13.5 12a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1h-1Zm-9-7h2.169l-.7 1H4.5a.5.5 0 0 0 0 1H15a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H5.5A2.5 2.5 0 0 1 3 14.5v-8A1.5 1.5 0 0 1 4.5 5ZM4 14.5A1.5 1.5 0 0 0 5.5 16H15a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1H4.5c-.175 0-.344-.03-.5-.085V14.5Z"/></g></svg>


--------------------------------------------------------------------------------
/assets/images/adaptive-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dilarauluturhan/dashboard-react-native/68c6ca3c0a96dc58b53c30de6e2f5aec4fe3311a/assets/images/adaptive-icon.png


--------------------------------------------------------------------------------
/assets/images/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dilarauluturhan/dashboard-react-native/68c6ca3c0a96dc58b53c30de6e2f5aec4fe3311a/assets/images/favicon.png


--------------------------------------------------------------------------------
/assets/images/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dilarauluturhan/dashboard-react-native/68c6ca3c0a96dc58b53c30de6e2f5aec4fe3311a/assets/images/icon.png


--------------------------------------------------------------------------------
/assets/images/partial-react-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dilarauluturhan/dashboard-react-native/68c6ca3c0a96dc58b53c30de6e2f5aec4fe3311a/assets/images/partial-react-logo.png


--------------------------------------------------------------------------------
/assets/images/react-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dilarauluturhan/dashboard-react-native/68c6ca3c0a96dc58b53c30de6e2f5aec4fe3311a/assets/images/react-logo.png


--------------------------------------------------------------------------------
/assets/images/react-logo@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dilarauluturhan/dashboard-react-native/68c6ca3c0a96dc58b53c30de6e2f5aec4fe3311a/assets/images/react-logo@2x.png


--------------------------------------------------------------------------------
/assets/images/react-logo@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dilarauluturhan/dashboard-react-native/68c6ca3c0a96dc58b53c30de6e2f5aec4fe3311a/assets/images/react-logo@3x.png


--------------------------------------------------------------------------------
/assets/images/splash.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dilarauluturhan/dashboard-react-native/68c6ca3c0a96dc58b53c30de6e2f5aec4fe3311a/assets/images/splash.png


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = function (api) {
2 |   api.cache(true);
3 |   return {
4 |     presets: ['babel-preset-expo'],
5 |   };
6 | };
7 | 


--------------------------------------------------------------------------------
/components/ExpenseBlock.tsx:
--------------------------------------------------------------------------------
  1 | import {
  2 |   View,
  3 |   Text,
  4 |   FlatList,
  5 |   ListRenderItem,
  6 |   StyleSheet,
  7 |   TouchableOpacity,
  8 | } from "react-native";
  9 | import React from "react";
 10 | import { ExpenseType } from "@/types";
 11 | import Colors from "@/constants/Colors";
 12 | import { Feather } from "@expo/vector-icons";
 13 | 
 14 | export default function ExpenseBlock({
 15 |   expenseList,
 16 | }: {
 17 |   expenseList: ExpenseType[];
 18 | }) {
 19 |   const renderItem: ListRenderItem<Partial<ExpenseType>> = ({
 20 |     item,
 21 |     index,
 22 |   }) => {
 23 |     if (index == 0) {
 24 |       return (
 25 |         <TouchableOpacity onPress={() => {}}>
 26 |           <View style={styles.addItemBtn}>
 27 |             <Feather name="plus" size={22} color={"#CCC"} />
 28 |           </View>
 29 |         </TouchableOpacity>
 30 |       );
 31 |     }
 32 |     return (
 33 |       <View
 34 |         style={[
 35 |           styles.expenseBlock,
 36 |           {
 37 |             backgroundColor:
 38 |               item.name === "Turnover"
 39 |                 ? Colors.blue
 40 |                 : item.name === "Saving"
 41 |                 ? Colors.white
 42 |                 : Colors.tintColor,
 43 |           },
 44 |         ]}
 45 |       >
 46 |         <Text
 47 |           style={{
 48 |             fontSize: 14,
 49 |             color:
 50 |               item.name === "Turnover"
 51 |                 ? Colors.black
 52 |                 : item.name === "Saving"
 53 |                 ? Colors.black
 54 |                 : Colors.white,
 55 |           }}
 56 |         >
 57 |           {item.name}
 58 |         </Text>
 59 |         <Text
 60 |           style={{
 61 |             color:
 62 |               item.name === "Turnover"
 63 |                 ? Colors.black
 64 |                 : item.name === "Saving"
 65 |                 ? Colors.black
 66 |                 : Colors.white,
 67 |             fontSize: 16,
 68 |             fontWeight: 600,
 69 |           }}
 70 |         >
 71 |           ${item.amount}
 72 |         </Text>
 73 |         <View
 74 |           style={{
 75 |             backgroundColor: "rgba(255,255,255,0.2)",
 76 |             paddingHorizontal: 5,
 77 |             paddingVertical: 3,
 78 |             borderRadius: 10,
 79 |           }}
 80 |         >
 81 |           <Text
 82 |             style={{
 83 |               color:
 84 |                 item.name === "Turnover"
 85 |                   ? Colors.black
 86 |                   : item.name === "Saving"
 87 |                   ? Colors.black
 88 |                   : Colors.white,
 89 |               fontSize: 14,
 90 |             }}
 91 |           >
 92 |             {item.percentage}%
 93 |           </Text>
 94 |         </View>
 95 |       </View>
 96 |     );
 97 |   };
 98 | 
 99 |   const staticItem = [{ name: "Add Item" }];
100 | 
101 |   return (
102 |     <View style={{ paddingVertical: 20 }}>
103 |       <FlatList
104 |         data={staticItem.concat(expenseList)}
105 |         renderItem={renderItem}
106 |         horizontal
107 |         showsHorizontalScrollIndicator={false}
108 |       />
109 |     </View>
110 |   );
111 | }
112 | 
113 | const styles = StyleSheet.create({
114 |   expenseBlock: {
115 |     backgroundColor: Colors.blue,
116 |     width: 100,
117 |     padding: 15,
118 |     borderRadius: 15,
119 |     marginRight: 20,
120 |     gap: 7,
121 |     justifyContent: "space-between",
122 |     alignItems: "flex-start",
123 |   },
124 |   addItemBtn: {
125 |     flex: 1,
126 |     borderWidth: 2,
127 |     borderColor: "#666",
128 |     borderStyle: "dashed",
129 |     borderRadius: 10,
130 |     marginRight: 20,
131 |     padding: 20,
132 |     justifyContent: "center",
133 |     alignItems: "center",
134 |   },
135 | });
136 | 


--------------------------------------------------------------------------------
/components/Header.tsx:
--------------------------------------------------------------------------------
 1 | import {
 2 |   View,
 3 |   Text,
 4 |   SafeAreaView,
 5 |   StyleSheet,
 6 |   Image,
 7 |   TouchableOpacity,
 8 | } from "react-native";
 9 | import React from "react";
10 | import Colors from "@/constants/Colors";
11 | 
12 | export default function Header() {
13 |   return (
14 |     <SafeAreaView style={styles.container}>
15 |       <View style={styles.wrapper}>
16 |         <View style={styles.userInfoWrapper}>
17 |           <Image
18 |             source={{ uri: "https://i.pravatar.cc/250?img=10" }}
19 |             style={styles.userImg}
20 |           />
21 |           <View style={{ marginLeft: 10 }}>
22 |             <Text style={{ color: Colors.white, fontSize: 12 }}>
23 |               Hi, Dilotabi!
24 |             </Text>
25 |             <Text
26 |               style={{ color: Colors.tintColor, fontSize: 16, fontWeight: 500 }}
27 |             >
28 |               Your Admin Panel
29 |             </Text>
30 |           </View>
31 |         </View>
32 | 
33 |         <TouchableOpacity onPress={() => {}} style={styles.btnWrapper}>
34 |           <Text style={{ color: Colors.white, fontSize: 12 }}>My Profile</Text>
35 |         </TouchableOpacity>
36 |       </View>
37 |     </SafeAreaView>
38 |   );
39 | }
40 | 
41 | const styles = StyleSheet.create({
42 |   container: { flex: 1, backgroundColor: Colors.black },
43 |   wrapper: {
44 |     flexDirection: "row",
45 |     justifyContent: "space-between",
46 |     alignItems: "center",
47 |     height: 70,
48 |     paddingHorizontal: 20,
49 |   },
50 |   userInfoWrapper: { flexDirection: "row", alignItems: "center" },
51 |   userImg: { width: 50, height: 50, borderRadius: 30 },
52 |   btnWrapper: {
53 |     borderColor: "#666",
54 |     borderWidth: 1,
55 |     padding: 8,
56 |     borderRadius: 10,
57 |   },
58 | });
59 | 


--------------------------------------------------------------------------------
/components/IncomeBlock.tsx:
--------------------------------------------------------------------------------
 1 | import {
 2 |   View,
 3 |   Text,
 4 |   FlatList,
 5 |   ListRenderItem,
 6 |   TouchableOpacity,
 7 | } from "react-native";
 8 | import React from "react";
 9 | import Colors from "@/constants/Colors";
10 | import { IncomeType } from "@/types";
11 | import {
12 |   DollarIcon,
13 |   WalletAddMoneyIcon,
14 |   WalletCardIcon,
15 | } from "@/constants/Icons";
16 | import { Feather } from "@expo/vector-icons";
17 | 
18 | export default function IncomeBlock({
19 |   incomeList,
20 | }: {
21 |   incomeList: IncomeType[];
22 | }) {
23 |   const renderItem: ListRenderItem<IncomeType> = ({ item }) => {
24 |     let icon = <DollarIcon width={22} height={22} color={Colors.white} />;
25 |     if (item.name === "Freelancing") {
26 |       icon = <WalletCardIcon width={22} height={22} color={Colors.white} />;
27 |     } else if (item.name === "Interest") {
28 |       icon = <WalletAddMoneyIcon width={22} height={22} color={Colors.white} />;
29 |     }
30 |     return (
31 |       <View
32 |         style={{
33 |           backgroundColor: Colors.grey,
34 |           padding: 20,
35 |           borderRadius: 20,
36 |           marginRight: 25,
37 |           width: 150,
38 |           gap: 10,
39 |         }}
40 |       >
41 |         <View
42 |           style={{
43 |             flexDirection: "row",
44 |             justifyContent: "space-between",
45 |             alignItems: "center",
46 |           }}
47 |         >
48 |           <View
49 |             style={{
50 |               borderColor: "#666",
51 |               borderWidth: 1,
52 |               borderRadius: 50,
53 |               padding: 5,
54 |               alignSelf: "flex-start",
55 |             }}
56 |           >
57 |             {icon}
58 |           </View>
59 |           <TouchableOpacity onPress={() => {}}>
60 |             <Feather name="more-horizontal" size={20} color={Colors.white} />
61 |           </TouchableOpacity>
62 |         </View>
63 |         <Text style={{ color: Colors.white }}>{item.name}</Text>
64 |         <Text style={{ color: Colors.white, fontSize: 16, fontWeight: 600 }}>
65 |           {item.amount}
66 |         </Text>
67 |       </View>
68 |     );
69 |   };
70 |   return (
71 |     <View>
72 |       <Text
73 |         style={{
74 |           color: Colors.white,
75 |           fontSize: 14,
76 |           fontWeight: 500,
77 |           marginBottom: 20,
78 |         }}
79 |       >
80 |         My <Text style={{ fontWeight: 700 }}>Income</Text>
81 |       </Text>
82 |       <FlatList
83 |         data={incomeList}
84 |         renderItem={renderItem}
85 |         horizontal
86 |         showsHorizontalScrollIndicator={false}
87 |       />
88 |     </View>
89 |   );
90 | }
91 | 


--------------------------------------------------------------------------------
/components/SpendingBlock.tsx:
--------------------------------------------------------------------------------
  1 | import { View, Text } from "react-native";
  2 | import React from "react";
  3 | import { SpendingType } from "@/types";
  4 | import Colors from "@/constants/Colors";
  5 | import {
  6 |   DollarIcon,
  7 |   AirbnbIcon,
  8 |   NetflixIcon,
  9 |   SpotifyIcon,
 10 |   AmazonIcon,
 11 |   FigmaIcon,
 12 |   ShoopingCartIcon,
 13 | } from "@/constants/Icons";
 14 | import { Feather, MaterialCommunityIcons } from "@expo/vector-icons";
 15 | 
 16 | export default function SpendingBlock({
 17 |   spendingList,
 18 | }: {
 19 |   spendingList: SpendingType[];
 20 | }) {
 21 |   let icon = <DollarIcon width={22} height={22} color={Colors.white} />;
 22 | 
 23 |   return (
 24 |     <View style={{ marginVertical: 20, alignItems: "flex-start" }}>
 25 |       <Text
 26 |         style={{
 27 |           color: Colors.white,
 28 |           fontSize: 14,
 29 |           fontWeight: 500,
 30 |           marginBottom: 10,
 31 |         }}
 32 |       >
 33 |         February <Text style={{ fontWeight: 700 }}>Sale</Text>
 34 |       </Text>
 35 | 
 36 |       {spendingList.map((item) => {
 37 |         if (item.name == "Trendyol") {
 38 |           icon = (
 39 |             <MaterialCommunityIcons
 40 |               name="shopping-outline"
 41 |               size={21}
 42 |               width={22}
 43 |               height={22}
 44 |               color={Colors.white}
 45 |             />
 46 |           );
 47 |         } else if (item.name == "Hepsiburada") {
 48 |           icon = (
 49 |             <ShoopingCartIcon width={22} height={22} color={Colors.white} />
 50 |           );
 51 |         } else if (item.name == "Amazon") {
 52 |           icon = <AmazonIcon width={22} height={22} color={Colors.white} />;
 53 |         } else if (item.name == "Online Shopping") {
 54 |           icon = (
 55 |             <ShoopingCartIcon width={22} height={22} color={Colors.white} />
 56 |           );
 57 |         }
 58 |         return (
 59 |           <View
 60 |             style={{
 61 |               flexDirection: "row",
 62 |               alignItems: "center",
 63 |               marginVertical: 10,
 64 |             }}
 65 |             key={item.id}
 66 |           >
 67 |             <View
 68 |               style={{
 69 |                 backgroundColor: Colors.grey,
 70 |                 padding: 10,
 71 |                 borderRadius: 50,
 72 |                 marginRight: 10,
 73 |               }}
 74 |             >
 75 |               {icon}
 76 |             </View>
 77 |             <View
 78 |               style={{
 79 |                 flex: 1,
 80 |                 flexDirection: "row",
 81 |                 justifyContent: "space-between",
 82 |                 alignItems: "center",
 83 |               }}
 84 |             >
 85 |               <View style={{ gap: 5 }}>
 86 |                 <Text
 87 |                   style={{
 88 |                     color: Colors.white,
 89 |                     fontSize: 16,
 90 |                     fontWeight: "600",
 91 |                   }}
 92 |                 >
 93 |                   {item.name}
 94 |                 </Text>
 95 |                 <Text style={{ color: Colors.white }}>{item.date}</Text>
 96 |               </View>
 97 |               <Text
 98 |                 style={{ color: Colors.white, fontSize: 16, fontWeight: "600" }}
 99 |               >
100 |                 ${item.amount}
101 |               </Text>
102 |             </View>
103 |           </View>
104 |         );
105 |       })}
106 |     </View>
107 |   );
108 | }
109 | 


--------------------------------------------------------------------------------
/constants/Colors.ts:
--------------------------------------------------------------------------------
1 | export default {
2 |   black: "#1A1A1A",
3 |   white: "#FCFCFC",
4 |   grey: "#373A40",
5 |   blue: "#405D72",
6 |   tintColor: "#E6B9A6",
7 | };
8 | 


--------------------------------------------------------------------------------
/constants/Icons.tsx:
--------------------------------------------------------------------------------
 1 | import DollarIcon from "@/assets/icons/dollar-line.svg";
 2 | import WalletAddMoneyIcon from "@/assets/icons/add-money-wallet-icon.svg";
 3 | import WalletCardIcon from "@/assets/icons/wallet-credit-card.svg";
 4 | import AmazonIcon from "@/assets/icons/amazon-outlined.svg";
 5 | import UberIcon from "@/assets/icons/brand-uber.svg";
 6 | import AirbnbIcon from "@/assets/icons/bxl-airbnb.svg";
 7 | import DollarSignIcon from "@/assets/icons/dollar-sign.svg";
 8 | import FigmaIcon from "@/assets/icons/logo-figma.svg";
 9 | import ShoopingCartIcon from "@/assets/icons/shopping-cart-line.svg";
10 | import SpotifyIcon from "@/assets/icons/spotify-logo-light.svg";
11 | import NetflixIcon from "@/assets/icons/netflix.svg";
12 | 
13 | export {
14 |   DollarIcon,
15 |   WalletAddMoneyIcon,
16 |   WalletCardIcon,
17 |   AmazonIcon,
18 |   UberIcon,
19 |   AirbnbIcon,
20 |   DollarSignIcon,
21 |   FigmaIcon,
22 |   ShoopingCartIcon,
23 |   SpotifyIcon,
24 |   NetflixIcon,
25 | };


--------------------------------------------------------------------------------
/data/expenses.json:
--------------------------------------------------------------------------------
 1 | [
 2 |   {
 3 |     "id": "1",
 4 |     "name": "Sale",
 5 |     "amount": "955.75",
 6 |     "percentage": "61"
 7 |   },
 8 |   {
 9 |     "id": "2",
10 |     "name": "Turnover",
11 |     "amount": "300.55",
12 |     "percentage": "19"
13 |   },
14 |   {
15 |     "id": "3",
16 |     "name": "Saving",
17 |     "amount": "200.95",
18 |     "percentage": "13"
19 |   },
20 |   {
21 |     "id": "4",
22 |     "name": "Profit",
23 |     "amount": "70.95",
24 |     "percentage": "5"
25 |   }
26 | ]
27 | 


--------------------------------------------------------------------------------
/data/income.json:
--------------------------------------------------------------------------------
 1 | [
 2 |     {
 3 |       "id": "1",
 4 |       "name": "Salary",
 5 |       "amount": "1,500.00"
 6 |     },
 7 |     {
 8 |       "id": "2",
 9 |       "name": "Freelancing",
10 |       "amount": "850.99"
11 |     },
12 |     {
13 |       "id": "3",
14 |       "name": "Interest",
15 |       "amount": "200.95"
16 |     }
17 |   ]


--------------------------------------------------------------------------------
/data/spending.json:
--------------------------------------------------------------------------------
 1 | [
 2 |   {
 3 |     "id": "1",
 4 |     "name": "Trendyol",
 5 |     "amount": "355.45",
 6 |     "date": "2024-02-02"
 7 |   },
 8 |   {
 9 |     "id": "2",
10 |     "name": "Hepsiburada",
11 |     "amount": "755,23",
12 |     "date": "2024-02-18"
13 |   },
14 |   {
15 |     "id": "3",
16 |     "name": "Amazon",
17 |     "amount": "234.69",
18 |     "date": "2024-02-06"
19 |   },
20 |   {
21 |     "id": "4",
22 |     "name": "Online Shopping",
23 |     "amount": "136.99",
24 |     "date": "2024-02-12"
25 |   }
26 | ]
27 | 


--------------------------------------------------------------------------------
/declarations.d.ts:
--------------------------------------------------------------------------------
1 | declare module "*.svg" {
2 |   import React from "react";
3 |   import { SvgProps } from "react-native-svg";
4 |   const content: React.FC<SvgProps>;
5 |   export default content;
6 | }
7 | 


--------------------------------------------------------------------------------
/expo-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="expo/types" />
2 | 
3 | // NOTE: This file should not be edited and should be in your git ignore


--------------------------------------------------------------------------------
/metro.config.js:
--------------------------------------------------------------------------------
 1 | const { getDefaultConfig } = require("expo/metro-config");
 2 | 
 3 | module.exports = (() => {
 4 |   const config = getDefaultConfig(__dirname);
 5 | 
 6 |   const { transformer, resolver } = config;
 7 | 
 8 |   config.transformer = {
 9 |     ...transformer,
10 |     babelTransformerPath: require.resolve("react-native-svg-transformer/expo"),
11 |   };
12 |   config.resolver = {
13 |     ...resolver,
14 |     assetExts: resolver.assetExts.filter((ext) => ext !== "svg"),
15 |     sourceExts: [...resolver.sourceExts, "svg"],
16 |   };
17 | 
18 |   return config;
19 | })();
20 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "dashboard-expo",
 3 |   "main": "expo-router/entry",
 4 |   "version": "1.0.0",
 5 |   "scripts": {
 6 |     "start": "expo start",
 7 |     "reset-project": "node ./scripts/reset-project.js",
 8 |     "android": "expo start --android",
 9 |     "ios": "expo start --ios",
10 |     "web": "expo start --web",
11 |     "test": "jest --watchAll",
12 |     "lint": "expo lint"
13 |   },
14 |   "jest": {
15 |     "preset": "jest-expo"
16 |   },
17 |   "dependencies": {
18 |     "@expo/vector-icons": "^14.0.2",
19 |     "@react-navigation/native": "^6.0.2",
20 |     "expo": "~51.0.23",
21 |     "expo-constants": "~16.0.2",
22 |     "expo-font": "~12.0.9",
23 |     "expo-linear-gradient": "~13.0.2",
24 |     "expo-linking": "~6.3.1",
25 |     "expo-router": "~3.5.19",
26 |     "expo-splash-screen": "~0.27.5",
27 |     "expo-status-bar": "~1.12.1",
28 |     "expo-system-ui": "~3.0.7",
29 |     "expo-web-browser": "~13.0.3",
30 |     "gifted-charts-core": "^0.1.25",
31 |     "lucide-react-native": "^0.417.0",
32 |     "react": "18.2.0",
33 |     "react-dom": "18.2.0",
34 |     "react-native": "0.74.3",
35 |     "react-native-gesture-handler": "~2.16.1",
36 |     "react-native-gifted-charts": "^1.4.23",
37 |     "react-native-reanimated": "~3.10.1",
38 |     "react-native-safe-area-context": "4.10.5",
39 |     "react-native-screens": "3.31.1",
40 |     "react-native-svg": "15.2.0",
41 |     "react-native-web": "~0.19.10"
42 |   },
43 |   "devDependencies": {
44 |     "@babel/core": "^7.20.0",
45 |     "@types/jest": "^29.5.12",
46 |     "@types/react": "~18.2.45",
47 |     "@types/react-test-renderer": "^18.0.7",
48 |     "jest": "^29.2.1",
49 |     "jest-expo": "~51.0.3",
50 |     "react-native-svg-transformer": "^1.5.0",
51 |     "react-test-renderer": "18.2.0",
52 |     "typescript": "~5.3.3"
53 |   },
54 |   "private": true
55 | }
56 | 


--------------------------------------------------------------------------------
/scripts/reset-project.js:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/env node
 2 | 
 3 | /**
 4 |  * This script is used to reset the project to a blank state.
 5 |  * It moves the /app directory to /app-example and creates a new /app directory with an index.tsx and _layout.tsx file.
 6 |  * You can remove the `reset-project` script from package.json and safely delete this file after running it.
 7 |  */
 8 | 
 9 | const fs = require('fs');
10 | const path = require('path');
11 | 
12 | const root = process.cwd();
13 | const oldDirPath = path.join(root, 'app');
14 | const newDirPath = path.join(root, 'app-example');
15 | const newAppDirPath = path.join(root, 'app');
16 | 
17 | const indexContent = `import { Text, View } from "react-native";
18 | 
19 | export default function Index() {
20 |   return (
21 |     <View
22 |       style={{
23 |         flex: 1,
24 |         justifyContent: "center",
25 |         alignItems: "center",
26 |       }}
27 |     >
28 |       <Text>Edit app/index.tsx to edit this screen.</Text>
29 |     </View>
30 |   );
31 | }
32 | `;
33 | 
34 | const layoutContent = `import { Stack } from "expo-router";
35 | 
36 | export default function RootLayout() {
37 |   return (
38 |     <Stack>
39 |       <Stack.Screen name="index" />
40 |     </Stack>
41 |   );
42 | }
43 | `;
44 | 
45 | fs.rename(oldDirPath, newDirPath, (error) => {
46 |   if (error) {
47 |     return console.error(`Error renaming directory: ${error}`);
48 |   }
49 |   console.log('/app moved to /app-example.');
50 | 
51 |   fs.mkdir(newAppDirPath, { recursive: true }, (error) => {
52 |     if (error) {
53 |       return console.error(`Error creating new app directory: ${error}`);
54 |     }
55 |     console.log('New /app directory created.');
56 | 
57 |     const indexPath = path.join(newAppDirPath, 'index.tsx');
58 |     fs.writeFile(indexPath, indexContent, (error) => {
59 |       if (error) {
60 |         return console.error(`Error creating index.tsx: ${error}`);
61 |       }
62 |       console.log('app/index.tsx created.');
63 | 
64 |       const layoutPath = path.join(newAppDirPath, '_layout.tsx');
65 |       fs.writeFile(layoutPath, layoutContent, (error) => {
66 |         if (error) {
67 |           return console.error(`Error creating _layout.tsx: ${error}`);
68 |         }
69 |         console.log('app/_layout.tsx created.');
70 |       });
71 |     });
72 |   });
73 | });
74 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "expo/tsconfig.base",
 3 |   "compilerOptions": {
 4 |     "strict": true,
 5 |     "paths": {
 6 |       "@/*": [
 7 |         "./*"
 8 |       ]
 9 |     }
10 |   },
11 |   "include": [
12 |     "**/*.ts",
13 |     "**/*.tsx",
14 |     ".expo/types/**/*.ts",
15 |     "expo-env.d.ts"
16 |   ]
17 | }
18 | 


--------------------------------------------------------------------------------
/types.ts:
--------------------------------------------------------------------------------
 1 | export interface ExpenseType {
 2 |   id: string;
 3 |   name: string;
 4 |   amount: string;
 5 |   percentage: string;
 6 | }
 7 | 
 8 | export interface IncomeType {
 9 |   id: string;
10 |   name: string;
11 |   amount: string;
12 | }
13 | 
14 | export interface SpendingType {
15 |   id: string;
16 |   name: string;
17 |   amount: string;
18 |   date: string;
19 | }
20 | 


--------------------------------------------------------------------------------