Untitled

 {/* Add Invoice Modal */}
      <Modal visible={isAddModalVisible} animationType="slide" transparent>
        <View style={styles.modalContainer}>
          <ScrollView style={styles.modalContent}>
            <Text style={styles.modalTitle}>Add New Invoice</Text>
            {/* Invoice Details */}
            <TextInput
              placeholder="Client ID (in client details)*"
              style={styles.underlinedInput}
              value={
                newInvoice.client_id ? newInvoice.client_id.toString() : ""
              } // Prevents "0" from appearing if undefined
              keyboardType="numeric" // Ensures only numeric input
              onChangeText={(text) =>
                setNewInvoice({
                  ...newInvoice,
                  client_id: text ? parseInt(text) || 0 : 0,
                })
              }
            />

            <Text style={styles.itemsTitle}>Items:</Text>
            {newInvoice.items.map((item, index) => (
              <View key={index} style={styles.itemInput}>
                <TextInput
                  placeholder="Item Name *"
                  style={styles.underlinedInput}
                  value={item.name}
                  onChangeText={(text) => {
                    const updatedItems = [...newInvoice.items];
                    updatedItems[index].name = text;
                    setNewInvoice({ ...newInvoice, items: updatedItems });
                  }}
                />
                <TextInput
                  placeholder="Price *"
                  style={styles.underlinedInput}
                  value={item.price ? item.price.toString() : ""}
                  onChangeText={(text) => {
                    const updatedItems = [...newInvoice.items];
                    updatedItems[index].price = parseFloat(text);
                    setNewInvoice({ ...newInvoice, items: updatedItems });
                  }}
                />
                <Picker
                  selectedValue={item.type}
                  onValueChange={(itemValue) => {
                    const updatedItems = [...newInvoice.items];
                    updatedItems[index].type = itemValue as
                      | "service"
                      | "product";
                    setNewInvoice({ ...newInvoice, items: updatedItems });
                  }}
                  style={styles.underlinedInput}
                >
                  <Picker.Item label="Select Type" value="" />
                  <Picker.Item label="Service" value="service" />
                  <Picker.Item label="Product" value="product" />
                </Picker>
                <TextInput
                  placeholder="Quantity *"
                  style={styles.underlinedInput}
                  value={item.quantity ? item.quantity.toString() : ""}
                  onChangeText={(text) => {
                    const updatedItems = [...newInvoice.items];
                    updatedItems[index].quantity = parseInt(text); // Convert to number
                    setNewInvoice({ ...newInvoice, items: updatedItems });
                  }}
                />

                <TextInput
                  placeholder="Tax Rate *"
                  style={styles.underlinedInput}
                  value={item.taxes ? item.taxes.toString() : ""}
                  onChangeText={(text) => {
                    const updatedItems = [...newInvoice.items];
                    updatedItems[index].taxes = parseFloat(text);
                    setNewInvoice({ ...newInvoice, items: updatedItems });
                  }}
                />

                {/* Remove Item Button */}
                <TouchableOpacity
                  onPress={() => {
                    const updatedItems = newInvoice.items.filter(
                      (_, idx) => idx !== index
                    );
                    setNewInvoice({ ...newInvoice, items: updatedItems });
                  }}
                  style={styles.removeItemButton}
                >
                  <Text style={styles.buttonText}>Remove Item</Text>
                </TouchableOpacity>
              </View>
            ))}
            {/* Add New Item Button */}
            <TouchableOpacity
              onPress={() => {
                setNewInvoice({
                  ...newInvoice,
                  items: [
                    ...newInvoice.items,
                    {
                      name: "",
                      price: 0,
                      type: "",
                      quantity: 0,
                      taxes: 0,
                    },
                  ],
                });
              }}
              style={styles.addItemButton}
            >
              <Text style={styles.buttonText}>Add Item</Text>
            </TouchableOpacity>

            <Picker
              selectedValue={newInvoice.currency}
              onValueChange={(itemValue) =>
                setNewInvoice({ ...newInvoice, currency: itemValue })
              }
              style={styles.underlinedInput}
            >
              <Picker.Item label="Select Currency" value="" />
              <Picker.Item label="USD" value="USD" />
              <Picker.Item label="EUR" value="EUR" />
              <Picker.Item label="TND" value="TND" />
              <Picker.Item label="GBP" value="GBP" />
              <Picker.Item label="Local Currency" value="local_currency" />
            </Picker>

            <TouchableOpacity onPress={() => setShowCreationDatePicker(true)}>
              <TextInput
                placeholder="Creation Date *"
                style={styles.underlinedInput}
                value={newInvoice.creation_date}
                editable={false}
              />
            </TouchableOpacity>
            {showCreationDatePicker && (
              <View>{renderDatePicker("creation_date", "newInvoice")}</View>
            )}

            <TouchableOpacity onPress={() => setShowDueDatePicker(true)}>
              <TextInput
                placeholder="Due Date *"
                style={styles.underlinedInput}
                value={newInvoice.due_date}
                editable={false}
              />
            </TouchableOpacity>
            {showDueDatePicker && (
              <View>{renderDatePicker("due_date", "newInvoice")}</View>
            )}

            {newInvoice.currency === "local_currency" && (
              <>
                <TextInput
                  placeholder="Fiscal Stamp"
                  style={styles.underlinedInput}
                  value={newInvoice.fiscal_stamp ? "true" : "false"}
                  onChangeText={(text) =>
                    setNewInvoice({
                      ...newInvoice,
                      fiscal_stamp: text.toLowerCase() === "true",
                    })
                  }
                />
              </>
            )}
            <View style={styles.modalButtons}>
              <TouchableOpacity
                onPress={closeAddInvoiceModal}
                style={styles.cancelButton}
              >
                <Text style={styles.buttonText}>Cancel</Text>
              </TouchableOpacity>
              <TouchableOpacity
                onPress={handleAddInvoice}
                style={styles.addInvoiceButton}
              >
                <Text style={styles.buttonText}>Add Invoice</Text>
              </TouchableOpacity>
            </View>
          </ScrollView>
        </View>
      </Modal>