Admin

App-Information
Add:
- screens/Admin/App-Information
- _ShareComponent/Admin
- app/(application)/admin/app-information

### No Issue

app/(application)/admin/_layout.tsx

@@ -23,6 +23,7 @@ export default function AdminLayout() {
     <>
       <Stack
         screenOptions={{
+          title: "HIPMI DASHBOARD",
           headerStyle: GStyles.headerStyle,
           headerTitleStyle: GStyles.headerTitleStyle,
           headerTitleAlign: "center",
@@ -47,44 +48,58 @@ export default function AdminLayout() {
           ),
         }}
       >
-        <Stack.Screen name="dashboard" options={{ title: "Main Dashboard" }} />
+        <Stack.Screen name="dashboard" 
+        // options={{ title: "Main Dashboard" }} 
+        />
         <Stack.Screen
           name="investment/index"
-          options={{ title: "Dashboard Investasi" }}
+          // options={{ title: "Dashboard Investasi" }}
         />
         <Stack.Screen
           name="investment/publish"
-          options={{ title: "Investasi Publish" }}
+          // options={{ title: "Investasi Publish" }}
         />
         <Stack.Screen
           name="investment/review"
-          options={{ title: "Investasi Review" }}
+          // options={{ title: "Investasi Review" }}
         />
         <Stack.Screen
           name="investment/reject"
-          options={{ title: "Investasi Reject" }}
+          // options={{ title: "Investasi Reject" }}
+        />
+        <Stack.Screen name="maps" 
+        // options={{ title: "Maps" }} 
+        />
+        <Stack.Screen name="app-information/index" 
+        // options={{ title: "Information" }} 
+        />
+        <Stack.Screen name="job/index" 
+        // options={{ title: "Dashboard Job" }} 
+        />
+        <Stack.Screen name="job/publish" 
+        // options={{ title: "Job Publish" }} 
+        />
+        <Stack.Screen name="job/review" 
+        // options={{ title: "Job Review" }} 
+        />
+        <Stack.Screen name="job/reject" 
+        // options={{ title: "Job Reject" }} 
         />
-        <Stack.Screen name="maps" options={{ title: "Maps" }} />
-        <Stack.Screen name="information" options={{ title: "Information" }} />
-        <Stack.Screen name="job/index" options={{ title: "Dashboard Job" }} />
-        <Stack.Screen name="job/publish" options={{ title: "Job Publish" }} />
-        <Stack.Screen name="job/review" options={{ title: "Job Review" }} />
-        <Stack.Screen name="job/reject" options={{ title: "Job Reject" }} />
         <Stack.Screen
           name="collaboration/index"
-          options={{ title: "Dashboard Collaboration" }}
+          // options={{ title: "Dashboard Collaboration" }}
         />
         <Stack.Screen
           name="collaboration/publish"
-          options={{ title: "Collaboration Publish" }}
+          // options={{ title: "Collaboration Publish" }}
         />
         <Stack.Screen
           name="collaboration/group"
-          options={{ title: "Collaboration Group" }}
+          // options={{ title: "Collaboration Group" }}
         />
         <Stack.Screen
           name="collaboration/reject"
-          options={{ title: "Collaboration Reject" }}
+          // options={{ title: "Collaboration Reject" }}
         />
       </Stack>
 

app/(application)/admin/app-information/index.tsx

@@ -0,0 +1,62 @@
+import {
+  ScrollableCustom,
+  ViewWrapper
+} from "@/components";
+import AdminAppInformation_BusinessFieldSection from "@/screens/Admin/App-Information/BusinessFieldSection";
+import AdminAppInformation_Bank from "@/screens/Admin/App-Information/InformationBankSection";
+import AdminAppInformation_StickerSection from "@/screens/Admin/App-Information/StickerSection";
+import { useState } from "react";
+
+export default function AdminInformation() {
+  const [activeCategory, setActiveCategory] = useState<string | null>("bank");
+
+  const handlePress = (item: any) => {
+    setActiveCategory(item.value);
+    // tambahkan logika lain seperti filter dsb.
+  };
+
+  const scrollComponent = (
+    <ScrollableCustom
+      data={[
+        {
+          id: "1",
+          label: "Informasi Bank",
+          value: "bank",
+        },
+        {
+          id: "2",
+          label: "Bidang Bisnis",
+          value: "business",
+        },
+        {
+          id: "3",
+          label: "Stiker",
+          value: "sticker",
+        },
+      ]}
+      onButtonPress={handlePress}
+      activeId={activeCategory as any}
+    />
+  );
+
+  const renderContent = () => {
+    switch (activeCategory) {
+      case "bank":
+        return <AdminAppInformation_Bank />;
+      case "business":
+        return <AdminAppInformation_BusinessFieldSection />;
+      case "sticker":
+        return <AdminAppInformation_StickerSection />;
+      default:
+        return <AdminAppInformation_Bank />;
+    }
+  };
+
+  return (
+    <>
+      <ViewWrapper headerComponent={scrollComponent}>
+        {renderContent()}
+      </ViewWrapper>
+    </>
+  );
+}

app/(application)/admin/dashboard.tsx

@@ -1,11 +1,40 @@
-import { TextCustom, ViewWrapper } from "@/components";
+import {
+  StackCustom,
+  TextCustom,
+  ViewWrapper
+} from "@/components";
+import AdminComp_BoxDashboard from "@/components/_ShareComponent/Admin/BoxDashboard";
+import { MainColor } from "@/constants/color-palet";
+import { Ionicons } from "@expo/vector-icons";
 
 export default function AdminDashboard() {
   return (
     <>
       <ViewWrapper>
-        <TextCustom>Admin Dashboard</TextCustom>
+        <StackCustom>
+          <TextCustom bold size={30}>
+            Main Dashboard
+          </TextCustom>
+          {listData.map((item, i) => (
+            <AdminComp_BoxDashboard key={i} item={item} />
+          ))}
+        </StackCustom>
       </ViewWrapper>
     </>
   );
 }
+
+const listData = [
+  {
+    label: "User",
+    value: 4,
+    icon: <Ionicons name="people" size={30} color={MainColor.yellow} />,
+  },
+  {
+    label: "Portofolio",
+    value: 7,
+    icon: (
+      <Ionicons name="id-card-outline" size={30} color={MainColor.yellow} />
+    ),
+  },
+];

app/(application)/admin/information.tsx

@@ -1,11 +0,0 @@
-import { TextCustom, ViewWrapper } from "@/components";
-
-export default function AdminInformation() {
-  return (
-    <>
-      <ViewWrapper>
-        <TextCustom>Information</TextCustom>
-      </ViewWrapper>
-    </>
-  );
-}

app/(application)/admin/maps.tsx

@@ -1,10 +1,10 @@
-import { TextCustom, ViewWrapper } from "@/components";
+import { MapCustom, ViewWrapper } from "@/components";
 
 export default function AdminMaps() {
   return (
     <>
       <ViewWrapper>
-        <TextCustom>Maps</TextCustom>
+        <MapCustom height={"100%"} />
       </ViewWrapper>
     </>
   );

components/Container/CircleContainer.tsx

@@ -1,15 +1,20 @@
 import { MainColor } from "@/constants/color-palet";
 import React from "react";
-import { StyleSheet, TextInput, View } from "react-native";
+import { StyleProp, StyleSheet, TextInput, View, ViewStyle } from "react-native";
 
 interface CircularInputProps {
-  value: string | number;
+  value?: string | number
-  onChange?: (value: string) => void;
+  onChange?: (value: string | number) => void;
+  icon?: React.ReactNode;
+  style?: StyleProp<ViewStyle>
 }
 
-const CircularInput: React.FC<CircularInputProps> = ({ value, onChange }) => {
+const CircularInput: React.FC<CircularInputProps> = ({ value, onChange, icon, style }) => {
   return (
-    <View style={styles.circleContainer}>
+    <View style={[styles.circleContainer, style]}>
+      {icon ? (
+        icon
+      ) : (
         <TextInput
           value={String(value)}
           onChangeText={onChange}
@@ -17,6 +22,7 @@ const CircularInput: React.FC<CircularInputProps> = ({ value, onChange }) => {
           keyboardType="numeric"
           maxLength={2} // Batasan maksimal karakter
         />
+      )}
     </View>
   );
 };

components/Divider/Divider.tsx

@@ -2,8 +2,8 @@ import { AccentColor } from "@/constants/color-palet";
 import { View } from "react-native";
 
 export default function Divider({
-    color = AccentColor.blue,
+    color = AccentColor.white,
-    size = 1,
+    size = 0.5,
     marginTop= 12,
     marginBottom= 12, 
 }: {

components/Text/TextCustom.tsx

@@ -22,7 +22,7 @@ interface TextCustomProps {
   style?: StyleProp<TextStyle>;
   bold?: boolean;
   semiBold?: boolean;
-  size?: "default" | "large" | "small" | "xlarge";
+  size?: "default" | "large" | "small" | "xlarge" | number
   color?: "default" | "yellow" | "red" | "gray" | "green" | "black"
   align?: TextAlign; // Prop untuk alignment
   truncate?: boolean | number;
@@ -54,6 +54,7 @@ const TextCustom: React.FC<TextCustomProps> = ({
     if (size === "large") selectedStyles.push(styles.large);
     else if (size === "xlarge") selectedStyles.push(styles.xlarge);
     else if (size === "small") selectedStyles.push(styles.small);
+    else if (typeof size === "number") selectedStyles.push({ fontSize: size });
 
     // Color
     if (color === "yellow") selectedStyles.push(styles.yellow);
@@ -105,7 +106,7 @@ export const styles = StyleSheet.create({
     fontSize: TEXT_SIZE_MEDIUM,
     color: MainColor.white,
     fontFamily: "Poppins-Regular",
-    lineHeight: 20,
+    // lineHeight: 20,
   },
   bold: {
     fontFamily: "Poppins-Bold",

components/_ShareComponent/Admin/BoxDashboard.tsx

@@ -0,0 +1,46 @@
+import BaseBox from "@/components/Box/BaseBox";
+import CircleContainer from "@/components/Container/CircleContainer";
+import Grid from "@/components/Grid/GridCustom";
+import StackCustom from "@/components/Stack/StackCustom";
+import TextCustom from "@/components/Text/TextCustom";
+import { MainColor } from "@/constants/color-palet";
+
+interface BoxDashboardProps {
+  item: {
+    label: string;
+    value: string | number;
+    icon: React.ReactNode;
+  };
+}
+
+export default function AdminComp_BoxDashboard({ item }: BoxDashboardProps) {
+  return (
+    <>
+      <BaseBox
+        backgroundColor={MainColor.soft_darkblue}
+        paddingTop={5}
+        paddingBottom={5}
+      >
+        <Grid containerStyle={{ marginBlock: 0 }}>
+          <Grid.Col
+            span={9}
+            style={{
+              paddingLeft: 10,
+            }}
+          >
+            <StackCustom gap={"xs"}>
+              <TextCustom bold>{item.label}</TextCustom>
+              <TextCustom size={50}>{item.value}</TextCustom>
+            </StackCustom>
+          </Grid.Col>
+          <Grid.Col
+            span={3}
+            style={{ alignItems: "flex-start", justifyContent: "center" }}
+          >
+            <CircleContainer icon={item.icon} />
+          </Grid.Col>
+        </Grid>
+      </BaseBox>
+    </>
+  );
+}

components/_ShareComponent/Admin/BoxTitlePage.tsx

@@ -0,0 +1,16 @@
+import BaseBox from "@/components/Box/BaseBox";
+import TextCustom from "@/components/Text/TextCustom";
+import { TEXT_SIZE_LARGE } from "@/constants/constans-value";
+
+export default function AdminComp_BoxTitle({ title , rightComponent}: { title: string , rightComponent?: React.ReactNode}) {
+  return (
+    <>
+      <BaseBox style={{ flexDirection: "row", justifyContent: "space-between" }}>
+        <TextCustom style={{ alignSelf: "center" }} bold size={TEXT_SIZE_LARGE}>
+          {title}
+        </TextCustom>
+        {rightComponent}
+      </BaseBox>
+    </>
+  );
+}

screens/Admin/App-Information/BusinessFieldSection.tsx

@@ -0,0 +1,9 @@
+import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
+
+export default function AdminAppInformation_BusinessFieldSection() {
+  return (
+    <>
+      <AdminComp_BoxTitle title="Bidang Bisnis" />
+    </>
+  );
+}

screens/Admin/App-Information/InformationBankSection.tsx

@@ -0,0 +1,95 @@
+import {
+  BaseBox,
+  ButtonCustom,
+  Divider,
+  Grid,
+  TextCustom
+} from "@/components";
+import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
+import { MainColor } from "@/constants/color-palet";
+import { ICON_SIZE_SMALL } from "@/constants/constans-value";
+import { dummyMasterBank } from "@/lib/dummy-data/_master/bank";
+import { FontAwesome5, Ionicons } from "@expo/vector-icons";
+import { useState } from "react";
+import { TouchableOpacity, View } from "react-native";
+import { Switch } from "react-native-paper";
+
+export default function AdminAppInformation_Bank() {
+  const [value, setValue] = useState(false);
+  return (
+    <>
+      <AdminComp_BoxTitle
+        title="Bank"
+        rightComponent={
+          <TouchableOpacity
+            activeOpacity={0.7}
+            style={{
+              backgroundColor: MainColor.yellow,
+              padding: 5,
+              borderRadius: 50,
+            }}
+            onPress={() => {}}
+          >
+            <Ionicons name="add" size={16} color="black" />
+          </TouchableOpacity>
+        }
+      />
+      <BaseBox>
+        <Grid>
+          <Grid.Col span={4} style={{ alignItems: "center" }}>
+            <TextCustom bold>Aksi</TextCustom>
+          </Grid.Col>
+          <Grid.Col span={4} style={{ alignItems: "center" }}>
+            <TextCustom bold>Status</TextCustom>
+          </Grid.Col>
+          <Grid.Col span={4}>
+            <TextCustom bold>Nama Bank</TextCustom>
+          </Grid.Col>
+        </Grid>
+
+        <Divider />
+
+        {dummyMasterBank.map((e, i) => (
+          <View key={i}>
+            <Grid>
+              <Grid.Col span={4}>
+                <ButtonCustom
+                  iconLeft={
+                    <FontAwesome5
+                      name="edit"
+                      size={ICON_SIZE_SMALL}
+                      color="black"
+                    />
+                  }
+                  onPress={() => {}}
+                >
+                  Edit
+                </ButtonCustom>
+              </Grid.Col>
+              <Grid.Col
+                span={4}
+                style={{ alignItems: "center", justifyContent: "center" }}
+              >
+                <Switch
+                  value={value}
+                  onValueChange={() => {
+                    setValue(!value);
+                  }}
+                  theme={{
+                    colors: {
+                      primary: MainColor.yellow,
+                    },
+                  }}
+                />
+              </Grid.Col>
+              <Grid.Col span={4} style={{ justifyContent: "center" }}>
+                <TextCustom>{e.code}</TextCustom>
+              </Grid.Col>
+            </Grid>
+            <Divider />
+          </View>
+        ))}
+      </BaseBox>
+    </>
+  );
+}

screens/Admin/App-Information/StickerSection.tsx

@@ -0,0 +1,9 @@
+import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
+
+export default function AdminAppInformation_StickerSection() {
+  return (
+    <>
+      <AdminComp_BoxTitle title="Sticker" />
+    </>
+  );
+}

screens/Admin/listPageAdmin.tsx

@@ -86,7 +86,7 @@ const adminListMenu: NavbarItem[] = [
   {
     label: "App Information",
     icon: "information-circle",
-    link: "/admin/information",
+    link: "/admin/app-information",
   },
   {
     label: "User Access",

screens/Authentication/LoginView.tsx

@@ -32,7 +32,7 @@ export default function LoginView() {
 
     // router.navigate("/verification");
     // router.navigate(`/(application)/(user)/profile/${id}`);
-    router.navigate("/(application)/(user)/home");
+    // router.navigate("/(application)/(user)/home");
     // router.navigate(`/(application)/profile/${id}/edit`);
     // router.navigate(`/(application)/(user)/portofolio/${id}`)
     // router.navigate(`/(application)/(image)/preview-image/${id}`);
@@ -40,7 +40,7 @@ export default function LoginView() {
     // router.replace("/(application)/coba");
     // router.navigate("/investment/(tabs)")1
     // router.navigate("/crowdfunding")
-    // router.navigate("/admin/dashboard")
+    router.navigate("/admin/dashboard")
   }
 
   return (