2025-10-27 11:32:16 +08:00
139 changed files with 9868 additions and 971 deletions
--- a/app/(application)/(user)/event/create.tsx
+++ b/app/(application)/(user)/event/create.tsx
@@ -1,27 +1,85 @@
+/* eslint-disable import/no-duplicates */
+/* eslint-disable @typescript-eslint/no-unused-vars */
 import {
-    BoxButtonOnFooter,
-    ButtonCustom,
-    SelectCustom,
-    StackCustom,
-    TextAreaCustom,
-    TextInputCustom,
-    ViewWrapper
+  BoxButtonOnFooter,
+  ButtonCustom,
+  SelectCustom,
+  Spacing,
+  StackCustom,
+  TextAreaCustom,
+  TextCustom,
+  TextInputCustom,
+  ViewWrapper,
 } from "@/components";
+import DateTimeInput from "@/components/DateInput/DateTimeIOS";
+import DateTimePickerCustom from "@/components/DateInput/DateTimePickerCustom";
 import { masterTypeEvent } from "@/lib/dummy-data/event/master-type-event";
+import { DateTimePickerEvent } from "@react-native-community/datetimepicker";
+import React, { useState } from "react";
+import { Platform, StyleSheet } from "react-native";

 export default function EventCreate() {
+  const [selectedDateIOS, setSelectedDateIOS] = useState<DateTimePickerEvent>();
+  const [selectDateAndroid, setSelectDateAndroid] = useState<Date>(new Date());
+  const [selectedTimeAndroid, setSelectedTimeAndroid] = useState<Date>(
+    new Date()
+  );
+
+  const handlerSubmit = () => {
+    console.log("Simpan");
+    const combined = new Date(selectDateAndroid);
+    combined.setHours(selectedTimeAndroid.getHours());
+    combined.setMinutes(selectedTimeAndroid.getMinutes());
+    combined.setSeconds(selectedTimeAndroid.getSeconds());
+    combined.setMilliseconds(selectedTimeAndroid.getMilliseconds());
+
+    const newDate = Platform.OS === "ios" ? selectedDateIOS : combined;
+    console.log(`newDate ${Platform.OS} > `, newDate);
+  };
+
  const buttonSubmit = (
    <BoxButtonOnFooter>
-      <ButtonCustom title="Simpan" onPress={() => console.log("Simpan")} />
+      <ButtonCustom title="Simpan" onPress={handlerSubmit} />
    </BoxButtonOnFooter>
  );
+
+  const time = () => {
+    return (
+      <>
+        {Platform.OS === "ios" ? (
+          <DateTimeInput
+            label="Tanggal Event"
+            value={selectedDateIOS}
+            onChange={(date: DateTimePickerEvent) => {
+              setSelectedDateIOS(date);
+            }}
+            required
+          />
+        ) : (
+          <DateTimePickerCustom
+            dateValue={selectDateAndroid}
+            timeValue={selectedTimeAndroid}
+            onChangeDate={(date: Date) => {
+              setSelectDateAndroid(date);
+            }}
+            onChangeTime={(time: Date) => {
+              setSelectedTimeAndroid(time);
+            }}
+          />
+        )}
+      </>
+    );
+  };
+
  return (
    <>
      <ViewWrapper footerComponent={buttonSubmit}>
+        <TextCustom>Test Datetime</TextCustom>
+
        <StackCustom gap={"xs"}>
          <TextInputCustom
-            label="Nama Event"
            placeholder="Masukkan nama event"
+            label="Nama Event"
            required
          />
          <SelectCustom
@@ -36,6 +94,8 @@ export default function EventCreate() {
            required
          />

+          {time()}
+
          <TextAreaCustom
            label="Deskripsi"
            placeholder="Masukkan deskripsi event"
@@ -48,3 +108,11 @@ export default function EventCreate() {
    </>
  );
 }
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    // padding: 20,
+  },
+});
--- a/bun.lock
+++ b/bun.lock
@@ -5,6 +5,7 @@
      "name": "hipmi-mobile",
      "dependencies": {
        "@expo/vector-icons": "^14.1.0",
+        "@react-native-community/datetimepicker": "8.4.1",
        "@react-navigation/bottom-tabs": "^7.4.2",
        "@react-navigation/drawer": "^7.5.2",
        "@react-navigation/elements": "^2.3.8",
@@ -372,6 +373,8 @@

    "@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.0", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" } }, "sha512-ujc+V6r0HNDviYqIK3rW4ffgYiZ8g5DEHrGJVk4x7kTlLXRDILnKX9vAUYeIsLOoDpDJ0ujpqMkjH4w2ofuo6w=="],

+    "@react-native-community/datetimepicker": ["@react-native-community/datetimepicker@8.4.1", "", { "dependencies": { "invariant": "^2.2.4" }, "peerDependencies": { "expo": ">=52.0.0", "react": "*", "react-native": "*", "react-native-windows": "*" }, "optionalPeers": ["expo", "react-native-windows"] }, "sha512-DrK+CUS5fZnz8dhzBezirkzQTcNDdaXer3oDLh0z4nc2tbdIdnzwvXCvi8IEOIvleoc9L95xS5tKUl0/Xv71Mg=="],
+
    "@react-native/assets-registry": ["@react-native/assets-registry@0.79.5", "", {}, "sha512-N4Kt1cKxO5zgM/BLiyzuuDNquZPiIgfktEQ6TqJ/4nKA8zr4e8KJgU6Tb2eleihDO4E24HmkvGc73naybKRz/w=="],

    "@react-native/babel-plugin-codegen": ["@react-native/babel-plugin-codegen@0.79.5", "", { "dependencies": { "@babel/traverse": "^7.25.3", "@react-native/codegen": "0.79.5" } }, "sha512-Rt/imdfqXihD/sn0xnV4flxxb1aLLjPtMF1QleQjEhJsTUPpH4TFlfOpoCvsrXoDl4OIcB1k4FVM24Ez92zf5w=="],
--- a/components/DateInput/DateTimeIOS.tsx
+++ b/components/DateInput/DateTimeIOS.tsx
@@ -0,0 +1,165 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+// DateTimeInput.tsx
+import DateTimePicker, {
+  DateTimePickerEvent,
+} from "@react-native-community/datetimepicker";
+import React, { useState } from "react";
+import {
+  Button,
+  Platform,
+  Text,
+  TouchableOpacity,
+  View,
+  StyleProp,
+  ViewStyle,
+} from "react-native";
+import ButtonCustom from "../Button/ButtonCustom";
+import TextCustom from "../Text/TextCustom";
+import dayjs from "dayjs";
+import TextInputCustom from "../TextInput/TextInputCustom";
+import { GStyles } from "@/styles/global-styles";
+import ButtonCenteredOnly from "../Button/ButtonCenteredOnly";
+import Spacing from "../_ShareComponent/Spacing";
+import Grid from "../Grid/GridCustom";
+import { Ionicons } from "@expo/vector-icons";
+import ClickableCustom from "../Clickable/ClickableCustom";
+import { AccentColor, MainColor } from "@/constants/color-palet";
+
+interface DateTimeInputProps {
+  // Main
+  value?: DateTimePickerEvent;
+  mode?: "date" | "time";
+  onChange: (selectedDate: DateTimePickerEvent) => void;
+  // Main
+  label?: string;
+  required?: boolean;
+  disabled?: boolean;
+  iconLeft?: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  borderRadius?: number;
+  externalError?: string;
+  internalError?: string;
+  containerStyle?: StyleProp<ViewStyle>;
+}
+
+const DateTimeInput: React.FC<DateTimeInputProps> = ({
+  // Main
+  value,
+  mode,
+  onChange,
+  // Main
+  label,
+  required,
+  disabled,
+  iconLeft,
+  style,
+  borderRadius = 8,
+  externalError,
+  internalError,
+  containerStyle,
+}) => {
+  const [show, setShow] = useState(false);
+  const [selectedDate, setSelectedDate] = useState<Date | undefined>(
+    value as any
+  );
+
+  const handleConfirm = (event: any, date?: Date) => {
+    if (event.type === "set" && date !== undefined) {
+      setSelectedDate(date);
+      onChange(date as any);
+    }
+  };
+
+  const handlePress = () => {
+    setShow(!show);
+  };
+
+  return (
+    <>
+      <ClickableCustom
+        activeOpacity={0.8}
+        style={[GStyles.inputContainerArea, containerStyle]}
+        onPress={handlePress}
+      >
+        {label && (
+          <Text style={GStyles.inputLabel}>
+            {label}
+            {required && <Text style={GStyles.inputRequired}> *</Text>}
+          </Text>
+        )}
+        <View
+          style={[
+            style,
+            { borderRadius },
+            externalError || internalError ? GStyles.inputErrorBorder : null,
+            GStyles.inputContainerInput,
+            disabled && GStyles.disabledBox,
+          ]}
+        >
+          <View style={GStyles.inputIcon}>
+            <Ionicons
+              name="calendar-outline"
+              size={20}
+              color={MainColor.placeholder}
+            />
+          </View>
+
+          <TextCustom color="gray">
+            {selectedDate ? (
+              <TextCustom color="black">
+                {dayjs(selectedDate).format("DD-MM-YYYY HH:mm")}
+              </TextCustom>
+            ) : (
+              "Pilih tanggal"
+            )}
+          </TextCustom>
+        </View>
+        {externalError ||
+          (internalError && (
+            <Text style={GStyles.inputErrorMessage}>
+              {externalError || internalError}
+            </Text>
+          ))}
+      </ClickableCustom>
+
+      {show && (
+        <>
+          <View
+            style={{
+              position: "absolute",
+              zIndex: 15,
+              backgroundColor: "white",
+              borderRadius: 8,
+              padding: 10,
+              // top: 0,
+              bottom: 0,
+              left: 0,
+              right: 0,
+              borderColor: "#ccc",
+              borderWidth: 1,
+            }}
+          >
+            <View style={{ alignItems: "flex-end" }}>
+              <Ionicons
+                name="close"
+                size={20}
+                color="black"
+                onPress={() => setShow(false)}
+              />
+            </View>
+
+            <DateTimePicker
+              value={selectedDate || new Date()}
+              mode={"datetime"}
+              display="inline"
+              onChange={handleConfirm}
+              minimumDate={new Date(Date.now())} // 30 days from now
+            />
+          </View>
+        </>
+      )}
+    </>
+  );
+};
+
+export default DateTimeInput;
--- a/components/DateInput/DateTimePickerCustom.tsx
+++ b/components/DateInput/DateTimePickerCustom.tsx
@@ -0,0 +1,143 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import React, { useState } from "react";
+import { Pressable, Text, View, StyleSheet } from "react-native";
+import DateTimePicker, {
+  DateTimePickerEvent,
+} from "@react-native-community/datetimepicker";
+import { GStyles } from "@/styles/global-styles";
+import { TEXT_SIZE_MEDIUM } from "@/constants/constans-value";
+import { MainColor } from "@/constants/color-palet";
+import Grid from "../Grid/GridCustom";
+import TextCustom from "../Text/TextCustom";
+
+type Props = {
+  dateValue?: Date;
+  timeValue?: Date;
+  onChangeDate: (date: Date) => void;
+  onChangeTime: (time: Date) => void;
+};
+
+const DateTimePickerCustom: React.FC<Props> = ({
+  dateValue,
+  timeValue,
+  onChangeDate,
+  onChangeTime,
+}) => {
+  const [showDate, setShowDate] = useState(false);
+  const [showTime, setShowTime] = useState(false);
+
+  const toggleDatePicker = () => {
+    setShowDate(!showDate);
+  };
+
+  const toggleTimePicker = () => {
+    setShowTime(!showTime);
+  };
+
+  const handleConfirmDate = (
+    event: DateTimePickerEvent,
+    selectedDate?: Date
+  ) => {
+    if (event.type === "set" && selectedDate !== undefined) {
+      onChangeDate(selectedDate);
+    }
+    setShowDate(false);
+  };
+
+  const handleConfirmTime = (
+    event: DateTimePickerEvent,
+    selectedTime?: Date
+  ) => {
+    if (event.type === "set" && selectedTime !== undefined) {
+      onChangeTime(selectedTime);
+    }
+    setShowTime(false);
+  };
+
+  return (
+    <>
+      {/* <Pressable onPress={toggleDatePicker} style={[GStyles.inputContainerInput, {borderRadius: 8} ]}>
+        <Text style={styles.buttonText}>
+          {value ? value.toLocaleDateString() : "Pilih tanggal"}
+        </Text>
+      </Pressable> */}
+
+      <View
+        style={{
+          paddingBlock: 6,
+          paddingInline: 12,
+          borderRadius: 8,
+          backgroundColor: MainColor.white,
+        }}
+      >
+        <Grid
+          containerStyle={{
+            borderRadius: 8,
+            justifyContent: "center",
+            alignItems: "center",
+          }}
+        >
+          <Grid.Col span={6} style={{}}>
+            <Pressable onPress={toggleDatePicker}>
+              <Text style={styles.buttonText}>
+                {dateValue ? dateValue.toLocaleDateString() : "Pilih tanggal"}
+              </Text>
+            </Pressable>
+          </Grid.Col>
+          <Grid.Col span={1} style={{ alignItems: "center" }}>
+            <TextCustom>|</TextCustom>
+          </Grid.Col>
+
+          <Grid.Col span={5} style={{}}>
+            <Pressable onPress={toggleTimePicker}>
+              <Text style={styles.buttonText}>
+                {timeValue ? timeValue.toLocaleTimeString("id-ID", { minute: "2-digit", hour: "2-digit" }) : "Pilih waktu"}
+              </Text>
+            </Pressable>
+          </Grid.Col>
+        </Grid>
+      </View>
+
+      {showDate && (
+        <DateTimePicker
+          testID="dateTimePicker"
+          value={dateValue || new Date()}
+          mode="date"
+          is24Hour={true}
+          display="default"
+          onChange={handleConfirmDate}
+        />
+      )}
+
+      {showTime && (
+        <DateTimePicker
+          testID="dateTimePicker"
+          value={timeValue || new Date()}
+          mode="time"
+          is24Hour={true}
+          display="default"
+          onChange={handleConfirmTime}
+        />
+      )}
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    paddingVertical: 12,
+    paddingHorizontal: 20,
+    backgroundColor: "#007AFF",
+    borderRadius: 8,
+    alignItems: "center",
+    justifyContent: "center",
+    marginVertical: 10,
+  },
+  buttonText: {
+    color: MainColor.black,
+    fontSize: TEXT_SIZE_MEDIUM,
+    // fontWeight: "bold",
+  },
+});
+
+export default DateTimePickerCustom;
--- a/components/DateInput/DateTimeTry.tsx
+++ b/components/DateInput/DateTimeTry.tsx
@@ -0,0 +1,70 @@
+import React, { useState } from "react";
+import { Pressable, Text, StyleSheet } from "react-native";
+import DateTimePicker, { Event } from "@react-native-community/datetimepicker";
+
+type Props = {
+  value?: Date;
+  mode?: "date" | "time" | "datetime";
+  onChange: (date: Date) => void;
+};
+
+const DateTimePickerTry: React.FC<Props> = ({
+  value = new Date(),
+  mode = "date",
+  onChange,
+}) => {
+  const [show, setShow] = useState(false);
+
+  const toggleDatePicker = () => {
+    setShow(!show);
+  };
+
+  const handleConfirm = (event: Event, selectedDate?: Date) => {
+    if (event.type === "set" && selectedDate !== undefined) {
+      onChange(selectedDate);
+    }
+    setShow(false);
+  };
+
+  return (
+    <>
+      <Pressable onPress={toggleDatePicker} style={styles.button}>
+        <Text style={styles.buttonText}>
+          {value ? value.toLocaleDateString() : "Pilih tanggal"}
+        </Text>
+      </Pressable>
+
+      {show && (
+        <DateTimePicker
+        //   style={styles.button}
+          textColor="white"
+          testID="dateTimePicker"
+          value={value}
+          mode={mode}
+          is24Hour={true}
+          display="default"
+          onChange={handleConfirm as any}
+        />
+      )}
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    paddingVertical: 12,
+    paddingHorizontal: 20,
+    backgroundColor: "white",
+    borderRadius: 8,
+    alignItems: "center",
+    justifyContent: "center",
+    marginVertical: 10,
+  },
+  buttonText: {
+    color: "white",
+    fontSize: 16,
+    fontWeight: "bold",
+  },
+});
+
+export default DateTimePickerTry;
--- a/components/Text/TextCustom.tsx
+++ b/components/Text/TextCustom.tsx
@@ -22,7 +22,7 @@ interface TextCustomProps {
  bold?: boolean;
  semiBold?: boolean;
  size?: "default" | "large" | "small";
-  color?: "default" | "yellow" | "red" | "gray" | "green";
+  color?: "default" | "yellow" | "red" | "gray" | "green" | "black"
  align?: TextAlign; // Prop untuk alignment
  truncate?: boolean | number;
  onPress?: () => void;
@@ -58,6 +58,7 @@ const TextCustom: React.FC<TextCustomProps> = ({
    else if (color === "red") selectedStyles.push(styles.red);
    else if (color === "gray") selectedStyles.push(styles.gray);
    else if (color === "green") selectedStyles.push(styles.green);
+    else if (color === "black") selectedStyles.push(styles.black);

    // Alignment
    if (align) {
@@ -130,4 +131,7 @@ export const styles = StyleSheet.create({
  green: {
    color: MainColor.green,
  },
+  black: {
+    color: MainColor.black,
+  },
 });
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
  },
  "dependencies": {
    "@expo/vector-icons": "^14.1.0",
+    "@react-native-community/datetimepicker": "8.4.1",
    "@react-navigation/bottom-tabs": "^7.4.2",
    "@react-navigation/drawer": "^7.5.2",
    "@react-navigation/elements": "^2.3.8",
--- a/screens/Authentication/LoginView.tsx
+++ b/screens/Authentication/LoginView.tsx
@@ -32,11 +32,11 @@ 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}`);
-    // router.replace("/(application)/(user)/event/(tabs)");
+    router.replace("/(application)/(user)/event/(tabs)");
  }

  return (