DEV Community: buildr

This article will implete pagination on the web Project

buildr — Sun, 02 Aug 2026 15:57:30 +0000

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";

export interface Property {
  id: number;
  propertyTitle: string;
  agencyId: number;
  propertyTypeId: number;
  propertyTypeName: string;
  description: string;
  amenities: string;
  monthlyRent: number;
  location: string;
  unitsAvailable: number;
  applicationDeadline: string;
  status: string;
  createdBy: string;
  createdDate: string;
  isDeleted: boolean;
  deletedDate: string;
  deletedBy: string;
  updatedDate: string;
  updatedBy: string;
}

export interface PropertyResponse {
  data: Property[];
  message: string;
  totalCount: number;
  pageNumber: number;
  pageSize: number;
}

export interface GetAllPropertyParams {
  pageSize: number;
  pageNumber: number;
  searchTerm?: string;
  statusFilter?: string;
}

export interface DeleteResponse {
  response: string;
}

export const propertyApi = createApi({
  reducerPath: "propertyApi",

  baseQuery: fetchBaseQuery({
    baseUrl: "https://localhost:7083/api/",

    prepareHeaders: (headers) => {
      const token = localStorage.getItem("token");

      if (token) {
        headers.set("Authorization", `Bearer ${token}`);
      }

      headers.set("Content-Type", "application/json");

      return headers;
    },
  }),

  tagTypes: ["Property"],

  endpoints: (builder) => ({
    // ==========================================
    // GET ALL PROPERTY
    // ==========================================
    getAllProperty: builder.query<
      PropertyResponse,
      GetAllPropertyParams
    >({
      query: ({
        pageSize,
        pageNumber,
        searchTerm = "",
        statusFilter = "",
      }) => ({
        url: "Property/GetAllProperty",
        method: "GET",
        params: {
          PageSize: pageSize,
          PageNumber: pageNumber,
          SearchTerm: searchTerm,
          StatusFilter: statusFilter,
        },
      }),

      providesTags: ["Property"],
    }),

    // ==========================================
    // DELETE PROPERTY
    // ==========================================
    deleteProperty: builder.mutation<
      DeleteResponse,
      number
    >({
      query: (propertyId) => ({
        url: "Property/DeleteProperty",
        method: "DELETE",
        body: {
          propertyId,
        },
      }),

      invalidatesTags: ["Property"],
    }),
  }),
});

export const {
  useGetAllPropertyQuery,
  useDeletePropertyMutation,
} = propertyApi;

Table

import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import {
  FaEdit,
  FaTrash,
  FaSearch,
  FaExclamationTriangle,
  FaTimes,
} from "react-icons/fa";

import {
  useGetAllPropertyQuery,
  useDeletePropertyMutation,
} from "../services/propertyApi";

const PAGE_SIZE = 10;

const PropertyTable = () => {
  const navigate = useNavigate();

  // ==========================================
  // PAGINATION
  // ==========================================
  const [pageNumber, setPageNumber] = useState(1);

  // ==========================================
  // SEARCH
  // ==========================================
  const [searchInput, setSearchInput] = useState("");
  const [searchTerm, setSearchTerm] = useState("");

  // ==========================================
  // STATUS FILTER
  // ==========================================
  const [statusFilter, setStatusFilter] = useState("");

  // ==========================================
  // DELETE MODAL
  // ==========================================
  const [deletePropertyId, setDeletePropertyId] =
    useState<number | null>(null);

  // ==========================================
  // ROLE
  // ==========================================
  const role = localStorage.getItem("role");

  const isTenant =
    role?.toLowerCase() === "tenant";

  // ==========================================
  // GET PROPERTIES
  // ==========================================
  const {
    data,
    isLoading,
    isFetching,
    isError,
  } = useGetAllPropertyQuery({
    pageSize: PAGE_SIZE,
    pageNumber,
    searchTerm,
    statusFilter,
  });

  // ==========================================
  // DELETE MUTATION
  // ==========================================
  const [
    deleteProperty,
    {
      isLoading: isDeleting,
    },
  ] = useDeletePropertyMutation();

  // ==========================================
  // DEBOUNCE SEARCH
  // ==========================================
  useEffect(() => {
    const timer = setTimeout(() => {
      setPageNumber(1);
      setSearchTerm(searchInput);
    }, 500);

    return () => clearTimeout(timer);
  }, [searchInput]);

  // ==========================================
  // DATA
  // ==========================================
  const properties = data?.data ?? [];

  const totalCount =
    data?.totalCount ?? 0;

  const totalPages = Math.ceil(
    totalCount / PAGE_SIZE
  );

  // ==========================================
  // APPLY
  // ==========================================
  const handleApply = (
    propertyId: number
  ) => {
    navigate(
      `/application-form/${propertyId}`
    );
  };

  // ==========================================
  // EDIT
  // ==========================================
  const handleEdit = (
    propertyId: number
  ) => {
    console.log(
      "Edit Property ID:",
      propertyId
    );

    // Future:
    // navigate(`/property/edit/${propertyId}`);
  };

  // ==========================================
  // OPEN DELETE MODAL
  // ==========================================
  const handleDeleteClick = (
    propertyId: number
  ) => {
    setDeletePropertyId(propertyId);
  };

  // ==========================================
  // CLOSE DELETE MODAL
  // ==========================================
  const handleCancelDelete = () => {
    if (isDeleting) return;

    setDeletePropertyId(null);
  };

  // ==========================================
  // CONFIRM DELETE
  // ==========================================
  const handleConfirmDelete = async () => {
    if (deletePropertyId === null) {
      return;
    }

    try {
      const result =
        await deleteProperty(
          deletePropertyId
        ).unwrap();

      console.log(
        result.response
      );

      // Close modal
      setDeletePropertyId(null);

      /*
       * Because deleteProperty has:
       *
       * invalidatesTags: ["Property"]
       *
       * RTK Query automatically refetches
       * the property list.
       */
    } catch (error) {
      console.error(
        "Failed to delete property:",
        error
      );
    }
  };

  // ==========================================
  // STATUS STYLE
  // ==========================================
  const getStatusStyle = (
    status: string
  ) => {
    switch (
      status.toLowerCase()
    ) {
      case "available":
        return "bg-green-100 text-green-700";

      case "rented":
        return "bg-red-100 text-red-700";

      case "onhold":
        return "bg-yellow-100 text-yellow-700";

      default:
        return "bg-gray-200 text-gray-700";
    }
  };

  // ==========================================
  // LOADING
  // ==========================================
  if (isLoading) {
    return (
      <div className="flex justify-center py-10">
        <p className="text-gray-700">
          Loading properties...
        </p>
      </div>
    );
  }

  // ==========================================
  // ERROR
  // ==========================================
  if (isError) {
    return (
      <div className="py-10 text-center text-red-600">
        Failed to load properties.
      </div>
    );
  }

  return (
    <>
      {/* ========================================
          PROPERTY TABLE
      ======================================== */}
      <div className="w-full rounded-xl border border-gray-300 bg-white shadow-sm">

        {/* HEADER */}
        <div
          className="flex flex-col gap-4
                     border-b border-gray-300
                     px-6 py-4
                     md:flex-row
                     md:items-center
                     md:justify-between"
        >
          <h2 className="text-xl font-semibold text-gray-900">
            Properties
          </h2>

          {/* SEARCH */}
          <div className="relative w-full md:w-80">
            <FaSearch
              className="absolute left-3 top-1/2
                         -translate-y-1/2
                         text-gray-500"
              size={14}
            />

            <input
              type="text"
              value={searchInput}
              onChange={(e) =>
                setSearchInput(
                  e.target.value
                )
              }
              placeholder="Search properties..."
              className="w-full rounded-lg
                         border border-gray-400
                         bg-white
                         py-2 pl-9 pr-3
                         text-gray-900
                         outline-none
                         placeholder:text-gray-500
                         focus:border-blue-500
                         focus:ring-2
                         focus:ring-blue-200"
            />
          </div>

          {/* STATUS FILTER */}
          <select
            value={statusFilter}
            onChange={(e) => {
              setStatusFilter(
                e.target.value
              );

              setPageNumber(1);
            }}
            className="rounded-lg
                       border border-gray-400
                       bg-white
                       px-3 py-2
                       text-gray-800
                       outline-none
                       focus:border-blue-500
                       focus:ring-2
                       focus:ring-blue-200"
          >
            <option value="">
              All Status
            </option>

            <option value="Available">
              Available
            </option>

            <option value="Rented">
              Rented
            </option>

            <option value="OnHold">
              OnHold
            </option>
          </select>
        </div>

        {/* TABLE */}
        <div className="overflow-x-auto">
          <table className="w-full text-left text-sm">

            {/* TABLE HEADER */}
            <thead className="bg-gray-300 text-gray-900">
              <tr>
                <th className="whitespace-nowrap px-6 py-4 font-semibold">
                  Property Name
                </th>

                <th className="whitespace-nowrap px-6 py-4 font-semibold">
                  Monthly Rent
                </th>

                <th className="whitespace-nowrap px-6 py-4 font-semibold">
                  Location
                </th>

                <th className="whitespace-nowrap px-6 py-4 font-semibold">
                  Units Available
                </th>

                <th className="whitespace-nowrap px-6 py-4 font-semibold">
                  Application Deadline
                </th>

                <th className="whitespace-nowrap px-6 py-4 font-semibold">
                  Status
                </th>

                {isTenant && (
                  <th className="px-6 py-4 text-center font-semibold">
                    Apply
                  </th>
                )}

                {!isTenant && (
                  <th className="px-6 py-4 text-center font-semibold">
                    Action
                  </th>
                )}
              </tr>
            </thead>

            {/* TABLE BODY */}
            <tbody className="divide-y divide-gray-300">

              {properties.length === 0 ? (
                <tr>
                  <td
                    colSpan={7}
                    className="px-6 py-12 text-center"
                  >
                    <p className="text-gray-700">
                      No properties found.
                    </p>
                  </td>
                </tr>
              ) : (
                properties.map(
                  (property) => (
                    <tr
                      key={property.id}
                      className="transition hover:bg-gray-100"
                    >

                      {/* PROPERTY NAME */}
                      <td className="px-6 py-4 font-medium text-gray-900">
                        {property.propertyTitle}
                      </td>

                      {/* RENT */}
                      <td className="px-6 py-4 font-medium text-gray-800">
                        ₹
                        {property.monthlyRent.toLocaleString(
                          "en-IN"
                        )}
                      </td>

                      {/* LOCATION */}
                      <td className="px-6 py-4 text-gray-700">
                        {property.location}
                      </td>

                      {/* UNITS */}
                      <td className="px-6 py-4 text-gray-700">
                        {property.unitsAvailable}
                      </td>

                      {/* DEADLINE */}
                      <td className="px-6 py-4 text-gray-700">
                        {new Date(
                          property.applicationDeadline
                        ).toLocaleDateString(
                          "en-IN"
                        )}
                      </td>

                      {/* STATUS */}
                      <td className="px-6 py-4">
                        <span
                          className={`inline-flex
                            rounded-full
                            px-3 py-1
                            text-xs
                            font-semibold
                            ${getStatusStyle(
                              property.status
                            )}`}
                        >
                          {property.status}
                        </span>
                      </td>

                      {/* TENANT */}
                      {isTenant && (
                        <td className="px-6 py-4 text-center">
                          <button
                            type="button"
                            onClick={() =>
                              handleApply(
                                property.id
                              )
                            }
                            className="rounded-lg
                                       bg-blue-600
                                       px-4 py-2
                                       font-medium
                                       text-white
                                       transition
                                       hover:bg-blue-700"
                          >
                            Apply
                          </button>
                        </td>
                      )}

                      {/* ADMIN / MANAGER */}
                      {!isTenant && (
                        <td className="px-6 py-4">
                          <div
                            className="flex
                                       items-center
                                       justify-center
                                       gap-4"
                          >

                            {/* EDIT */}
                            <button
                              type="button"
                              title="Edit Property"
                              onClick={() =>
                                handleEdit(
                                  property.id
                                )
                              }
                              className="text-blue-600
                                         transition
                                         hover:text-blue-800"
                            >
                              <FaEdit
                                size={18}
                              />
                            </button>

                            {/* DELETE */}
                            <button
                              type="button"
                              title="Delete Property"
                              onClick={() =>
                                handleDeleteClick(
                                  property.id
                                )
                              }
                              className="text-red-600
                                         transition
                                         hover:text-red-800"
                            >
                              <FaTrash
                                size={18}
                              />
                            </button>

                          </div>
                        </td>
                      )}

                    </tr>
                  )
                )
              )}

            </tbody>
          </table>
        </div>

        {/* PAGINATION */}
        <div
          className="flex flex-col gap-3
                     border-t border-gray-300
                     px-6 py-4
                     sm:flex-row
                     sm:items-center
                     sm:justify-between"
        >
          <p className="text-sm text-gray-600">
            Page{" "}
            <span className="font-semibold text-gray-900">
              {pageNumber}
            </span>{" "}
            of{" "}
            <span className="font-semibold text-gray-900">
              {totalPages || 1}
            </span>
          </p>

          <div className="flex gap-2">

            <button
              type="button"
              disabled={
                pageNumber === 1 ||
                isFetching
              }
              onClick={() =>
                setPageNumber(
                  (prev) => prev - 1
                )
              }
              className="rounded-lg
                         border border-gray-400
                         bg-white
                         px-4 py-2
                         text-sm
                         font-medium
                         text-gray-700
                         transition
                         hover:bg-gray-100
                         disabled:cursor-not-allowed
                         disabled:opacity-50"
            >
              Previous
            </button>

            <button
              type="button"
              disabled={
                pageNumber >=
                  totalPages ||
                isFetching
              }
              onClick={() =>
                setPageNumber(
                  (prev) => prev + 1
                )
              }
              className="rounded-lg
                         border border-gray-400
                         bg-white
                         px-4 py-2
                         text-sm
                         font-medium
                         text-gray-700
                         transition
                         hover:bg-gray-100
                         disabled:cursor-not-allowed
                         disabled:opacity-50"
            >
              Next
            </button>

          </div>
        </div>

      </div>

      {/* ========================================
          DELETE CONFIRMATION MODAL
      ======================================== */}
      {deletePropertyId !== null && (
        <div
          className="fixed inset-0 z-50
                     flex items-center
                     justify-center
                     bg-black/50
                     px-4"
        >

          <div
            className="w-full max-w-md
                       rounded-xl
                       bg-white
                       p-6
                       shadow-2xl"
          >

            {/* MODAL HEADER */}
            <div className="flex items-start justify-between">

              <div className="flex items-center gap-3">

                <div
                  className="flex h-10 w-10
                             items-center
                             justify-center
                             rounded-full
                             bg-red-100"
                >
                  <FaExclamationTriangle
                    className="text-red-600"
                    size={18}
                  />
                </div>

                <h3 className="text-lg font-semibold text-gray-900">
                  Delete Property
                </h3>

              </div>

              {/* CLOSE */}
              <button
                type="button"
                disabled={isDeleting}
                onClick={
                  handleCancelDelete
                }
                className="text-gray-500
                           transition
                           hover:text-gray-800
                           disabled:opacity-50"
              >
                <FaTimes size={18} />
              </button>

            </div>

            {/* MESSAGE */}
            <div className="mt-5">
              <p className="text-sm leading-6 text-gray-600">
                Are you sure you want to delete
                this property?
              </p>

              <p className="mt-2 text-sm font-medium text-red-600">
                This action cannot be undone.
              </p>
            </div>

            {/* BUTTONS */}
            <div
              className="mt-6 flex
                         justify-end
                         gap-3"
            >

              {/* CANCEL */}
              <button
                type="button"
                disabled={isDeleting}
                onClick={
                  handleCancelDelete
                }
                className="rounded-lg
                           border border-gray-400
                           bg-white
                           px-4 py-2
                           text-sm
                           font-medium
                           text-gray-700
                           transition
                           hover:bg-gray-100
                           disabled:cursor-not-allowed
                           disabled:opacity-50"
              >
                Cancel
              </button>

              {/* CONFIRM DELETE */}
              <button
                type="button"
                disabled={isDeleting}
                onClick={
                  handleConfirmDelete
                }
                className="rounded-lg
                           bg-red-600
                           px-4 py-2
                           text-sm
                           font-medium
                           text-white
                           transition
                           hover:bg-red-700
                           disabled:cursor-not-allowed
                           disabled:opacity-50"
              >
                {isDeleting
                  ? "Deleting..."
                  : "Delete"}
              </button>

            </div>

          </div>
        </div>
      )}
    </>
  );
};

export default PropertyTable;```

This Article describe how u can Add Item in your data base from client

buildr — Sun, 02 Aug 2026 12:25:40 +0000

React TypeScript Property Form Validation

export interface PropertyForm {
  propertyTitle: string;
  description: string;
  amenities: string;
  monthlyRent: string;
  location: string;
  unitsAvailable: string;
  applicationDeadline: string;
}

export interface PropertyFormErrors {
  propertyTitle?: string;
  description?: string;
  amenities?: string;
  monthlyRent?: string;
  location?: string;
  unitsAvailable?: string;
  applicationDeadline?: string;
}

export const validatePropertyField = (
  name: keyof PropertyForm,
  value: string
): string => {
  switch (name) {
    case "propertyTitle":
      if (!value.trim()) {
        return "Property title is required";
      }

      if (value.trim().length < 3) {
        return "Property title must be at least 3 characters";
      }

      return "";

    case "description":
      if (!value.trim()) {
        return "Description is required";
      }

      if (value.trim().length > 2000) {
        return "Description cannot exceed 2000 characters";
      }

      return "";

    case "amenities":
      if (!value.trim()) {
        return "Amenities are required";
      }

      return "";

    case "monthlyRent":
      if (!value.trim()) {
        return "Monthly rent is required";
      }

      if (Number(value) <= 0) {
        return "Monthly rent must be greater than 0";
      }

      return "";

    case "location":
      if (!value.trim()) {
        return "Location is required";
      }

      return "";

    case "unitsAvailable":
      if (!value.trim()) {
        return "Units available is required";
      }

      if (!Number.isInteger(Number(value))) {
        return "Units available must be a whole number";
      }

      if (Number(value) < 1) {
        return "At least 1 unit must be available";
      }

      return "";

    case "applicationDeadline":
      if (!value) {
        return "Application deadline is required";
      }

      return "";

    default:
      return "";
  }
};

export const validatePropertyForm = (
  formData: PropertyForm
): PropertyFormErrors => {
  const errors: PropertyFormErrors = {};

  Object.entries(formData).forEach(([name, value]) => {
    const error = validatePropertyField(
      name as keyof PropertyForm,
      value
    );

    if (error) {
      errors[name as keyof PropertyFormErrors] = error;
    }
  });

  return errors;
};

Add Product Form **

import { useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { toast } from "react-toastify";

import { useAddPropertyMutation } from "../services/propertyApi";

import {
  PropertyForm,
  PropertyFormErrors,
  validatePropertyField,
  validatePropertyForm,
} from "../validations/propertyValidation";

const AddProperty = () => {
  const navigate = useNavigate();

  const { agencyId } = useParams<{ agencyId: string }>();

  const [addProperty, { isLoading: isAdding }] =
    useAddPropertyMutation();

  const [formData, setFormData] = useState<PropertyForm>({
    propertyTitle: "",
    description: "",
    amenities: "",
    monthlyRent: "",
    location: "",
    unitsAvailable: "",
    applicationDeadline: "",
  });

  const [errors, setErrors] = useState<PropertyFormErrors>({});

  // ----------------------------------------
  // Handle input change
  // ----------------------------------------

  const handleChange = (
    e: React.ChangeEvent<
      HTMLInputElement | HTMLTextAreaElement
    >
  ) => {
    const { name, value } = e.target;

    setFormData((prev) => ({
      ...prev,
      [name]: value,
    }));

    // Clear field error while typing
    if (errors[name as keyof PropertyFormErrors]) {
      setErrors((prev) => ({
        ...prev,
        [name]: "",
      }));
    }
  };

  // ----------------------------------------
  // Blur validation
  // ----------------------------------------

  const handleBlur = (
    e: React.FocusEvent<
      HTMLInputElement | HTMLTextAreaElement
    >
  ) => {
    const { name, value } = e.target;

    const error = validatePropertyField(
      name as keyof PropertyForm,
      value
    );

    setErrors((prev) => ({
      ...prev,
      [name]: error,
    }));
  };

  // ----------------------------------------
  // Submit
  // ----------------------------------------

  const handleSubmit = async (
    e: React.FormEvent<HTMLFormElement>
  ) => {
    e.preventDefault();

    // Validate complete form
    const validationErrors = validatePropertyForm(formData);

    setErrors(validationErrors);

    if (Object.keys(validationErrors).length > 0) {
      toast.error("Please fix the validation errors");
      return;
    }

    // Validate Agency ID
    const parsedAgencyId = Number(agencyId);

    if (!agencyId || Number.isNaN(parsedAgencyId)) {
      toast.error("Invalid agency ID");
      return;
    }

    try {
      const result = await addProperty({
        agencyId: parsedAgencyId,
        propertyTitle: formData.propertyTitle.trim(),
        description: formData.description.trim(),
        amenities: formData.amenities.trim(),
        monthlyRent: Number(formData.monthlyRent),
        location: formData.location.trim(),
        unitsAvailable: Number(formData.unitsAvailable),
        applicationDeadline: formData.applicationDeadline,
      }).unwrap();

      toast.success(result.response);

      // Navigate only after successful API call
      navigate(-1);
    } catch (error) {
      console.error("Add property error:", error);

      toast.error("Failed to add property");
    }
  };

  // ----------------------------------------
  // Back
  // ----------------------------------------

  const handleBack = () => {
    navigate(-1);
  };

  return (
    <div className="min-h-screen bg-gray-50 px-4 py-6 sm:px-6 lg:px-8">
      <div className="mx-auto max-w-4xl">

        {/* Header */}
        <div className="mb-6 flex items-center gap-3">

          <button
            type="button"
            onClick={handleBack}
            disabled={isAdding}
            className="flex h-10 w-10 items-center justify-center rounded-full border bg-white text-gray-700 shadow-sm transition hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50"
          >
            <span className="text-xl">←</span>
          </button>

          <div>
            <h1 className="text-2xl font-bold text-gray-900 sm:text-3xl">
              Add Property
            </h1>

            <p className="mt-1 text-sm text-gray-500">
              Add a new property for Agency #{agencyId}
            </p>
          </div>

        </div>

        {/* Form */}
        <div className="rounded-xl bg-white p-5 shadow-sm sm:p-8">

          <form onSubmit={handleSubmit} noValidate>

            <div className="grid grid-cols-1 gap-5 md:grid-cols-2">

              {/* Property Title */}
              <div className="md:col-span-2">
                <label
                  htmlFor="propertyTitle"
                  className="mb-2 block text-sm font-medium text-gray-700"
                >
                  Property Title
                  <span className="text-red-500"> *</span>
                </label>

                <input
                  id="propertyTitle"
                  name="propertyTitle"
                  type="text"
                  value={formData.propertyTitle}
                  onChange={handleChange}
                  onBlur={handleBlur}
                  placeholder="Enter property title"
                  className={`w-full rounded-lg border px-4 py-3 outline-none ${
                    errors.propertyTitle
                      ? "border-red-500"
                      : "border-gray-300 focus:border-blue-500"
                  }`}
                />

                {errors.propertyTitle && (
                  <p className="mt-1 text-sm text-red-500">
                    {errors.propertyTitle}
                  </p>
                )}
              </div>

              {/* Description */}
              <div className="md:col-span-2">

                <div className="mb-2 flex justify-between">
                  <label
                    htmlFor="description"
                    className="text-sm font-medium text-gray-700"
                  >
                    Description
                    <span className="text-red-500"> *</span>
                  </label>

                  <span className="text-xs text-gray-400">
                    {formData.description.length}/2000
                  </span>
                </div>

                <textarea
                  id="description"
                  name="description"
                  rows={5}
                  maxLength={2000}
                  value={formData.description}
                  onChange={handleChange}
                  onBlur={handleBlur}
                  placeholder="Describe the property..."
                  className={`w-full resize-none rounded-lg border px-4 py-3 outline-none ${
                    errors.description
                      ? "border-red-500"
                      : "border-gray-300 focus:border-blue-500"
                  }`}
                />

                {errors.description && (
                  <p className="mt-1 text-sm text-red-500">
                    {errors.description}
                  </p>
                )}
              </div>

              {/* Amenities */}
              <div className="md:col-span-2">

                <label
                  htmlFor="amenities"
                  className="mb-2 block text-sm font-medium text-gray-700"
                >
                  Amenities
                  <span className="text-red-500"> *</span>
                </label>

                <input
                  id="amenities"
                  name="amenities"
                  type="text"
                  value={formData.amenities}
                  onChange={handleChange}
                  onBlur={handleBlur}
                  placeholder="Parking, WiFi, Gym, Swimming Pool"
                  className={`w-full rounded-lg border px-4 py-3 outline-none ${
                    errors.amenities
                      ? "border-red-500"
                      : "border-gray-300 focus:border-blue-500"
                  }`}
                />

                {errors.amenities && (
                  <p className="mt-1 text-sm text-red-500">
                    {errors.amenities}
                  </p>
                )}
              </div>

              {/* Monthly Rent */}
              <div>

                <label
                  htmlFor="monthlyRent"
                  className="mb-2 block text-sm font-medium text-gray-700"
                >
                  Monthly Rent
                  <span className="text-red-500"> *</span>
                </label>

                <input
                  id="monthlyRent"
                  name="monthlyRent"
                  type="number"
                  min="1"
                  value={formData.monthlyRent}
                  onChange={handleChange}
                  onBlur={handleBlur}
                  placeholder="25000"
                  className={`w-full rounded-lg border px-4 py-3 outline-none ${
                    errors.monthlyRent
                      ? "border-red-500"
                      : "border-gray-300 focus:border-blue-500"
                  }`}
                />

                {errors.monthlyRent && (
                  <p className="mt-1 text-sm text-red-500">
                    {errors.monthlyRent}
                  </p>
                )}
              </div>

              {/* Units Available */}
              <div>

                <label
                  htmlFor="unitsAvailable"
                  className="mb-2 block text-sm font-medium text-gray-700"
                >
                  Units Available
                  <span className="text-red-500"> *</span>
                </label>

                <input
                  id="unitsAvailable"
                  name="unitsAvailable"
                  type="number"
                  min="1"
                  step="1"
                  value={formData.unitsAvailable}
                  onChange={handleChange}
                  onBlur={handleBlur}
                  placeholder="5"
                  className={`w-full rounded-lg border px-4 py-3 outline-none ${
                    errors.unitsAvailable
                      ? "border-red-500"
                      : "border-gray-300 focus:border-blue-500"
                  }`}
                />

                {errors.unitsAvailable && (
                  <p className="mt-1 text-sm text-red-500">
                    {errors.unitsAvailable}
                  </p>
                )}
              </div>

              {/* Location */}
              <div className="md:col-span-2">

                <label
                  htmlFor="location"
                  className="mb-2 block text-sm font-medium text-gray-700"
                >
                  Location
                  <span className="text-red-500"> *</span>
                </label>

                <input
                  id="location"
                  name="location"
                  type="text"
                  value={formData.location}
                  onChange={handleChange}
                  onBlur={handleBlur}
                  placeholder="Enter property location"
                  className={`w-full rounded-lg border px-4 py-3 outline-none ${
                    errors.location
                      ? "border-red-500"
                      : "border-gray-300 focus:border-blue-500"
                  }`}
                />

                {errors.location && (
                  <p className="mt-1 text-sm text-red-500">
                    {errors.location}
                  </p>
                )}
              </div>

              {/* Application Deadline */}
              <div>

                <label
                  htmlFor="applicationDeadline"
                  className="mb-2 block text-sm font-medium text-gray-700"
                >
                  Application Deadline
                  <span className="text-red-500"> *</span>
                </label>

                <input
                  id="applicationDeadline"
                  name="applicationDeadline"
                  type="date"
                  min={new Date().toISOString().split("T")[0]}
                  value={formData.applicationDeadline}
                  onChange={handleChange}
                  onBlur={handleBlur}
                  className={`w-full rounded-lg border px-4 py-3 outline-none ${
                    errors.applicationDeadline
                      ? "border-red-500"
                      : "border-gray-300 focus:border-blue-500"
                  }`}
                />

                {errors.applicationDeadline && (
                  <p className="mt-1 text-sm text-red-500">
                    {errors.applicationDeadline}
                  </p>
                )}
              </div>

            </div>

            {/* Buttons */}
            <div className="mt-8 flex flex-col-reverse gap-3 border-t pt-6 sm:flex-row sm:justify-end">

              <button
                type="button"
                onClick={handleBack}
                disabled={isAdding}
                className="rounded-lg border border-gray-300 px-6 py-3 font-medium text-gray-700 hover:bg-gray-50 disabled:opacity-50"
              >
                Cancel
              </button>

              <button
                type="submit"
                disabled={isAdding}
                className="rounded-lg bg-blue-600 px-6 py-3 font-medium text-white hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-60"
              >
                {isAdding
                  ? "Adding Property..."
                  : "Add Property"}
              </button>

            </div>

          </form>
        </div>
      </div>
    </div>
  );
};

export default AddProperty;

React TypeScript: Delete with Confirmation Modal and RTK Query

buildr — Sun, 02 Aug 2026 10:33:04 +0000

import { useState } from "react";
import { toast } from "react-toastify";
import { useNavigate } from "react-router-dom";
import {
  useGetAllAgencyQuery,
  useDeleteAgencyMutation,
} from "../services/agencyApi";

const AgencyTable = () => {
  const navigate = useNavigate();

  // Agency selected for deletion
  const [selectedAgencyId, setSelectedAgencyId] =
    useState<number | null>(null);

  // Get all agencies
  const {
    data: agencyData = [],
    isLoading: isAgencyLoading,
    isError: isAgencyError,
  } = useGetAllAgencyQuery();

  // Delete agency mutation
  const [deleteAgency, { isLoading: isDeleting }] =
    useDeleteAgencyMutation();

  // Delete button click
  const handleDeleteClick = (agencyId: number) => {
    setSelectedAgencyId(agencyId);
  };

  // Cancel delete
  const handleCancelDelete = () => {
    setSelectedAgencyId(null);
  };

  // Confirm delete
  const handleConfirmDelete = async () => {
    if (selectedAgencyId === null) return;

    try {
      const result = await deleteAgency({
        agencyId: selectedAgencyId,
      }).unwrap();

      toast.success(result.response);

      setSelectedAgencyId(null);
    } catch (error) {
      console.error("Delete agency error:", error);

      toast.error("Failed to delete agency");
    }
  };

  // Add Property
  const handleAddProperty = (agencyId: number) => {
    navigate(`/admin/properties/add/${agencyId}`);
  };

  // Loading state
  if (isAgencyLoading) {
    return <div>Loading agencies...</div>;
  }

  // Error state
  if (isAgencyError) {
    return <div>Failed to load agencies.</div>;
  }

  return (
    <>
      <div className="overflow-x-auto">
        <table className="w-full border-collapse">
          <thead>
            <tr>
              <th>ID</th>
              <th>Agency Name</th>
              <th>Agency Type</th>
              <th>Website</th>
              <th>Action</th>
            </tr>
          </thead>

          <tbody>
            {agencyData.length > 0 ? (
              agencyData.map((agency) => (
                <tr key={agency.id}>
                  <td>{agency.id}</td>

                  <td>{agency.agencyName}</td>

                  <td>{agency.agencyType}</td>

                  <td>{agency.website || "-"}</td>

                  <td>
                    <div className="flex gap-2">
                      {/* Add Property */}
                      <button
                        type="button"
                        onClick={() =>
                          handleAddProperty(agency.id)
                        }
                        className="rounded bg-blue-600 px-4 py-2 text-white"
                      >
                        Add Property
                      </button>

                      {/* Delete */}
                      <button
                        type="button"
                        onClick={() =>
                          handleDeleteClick(agency.id)
                        }
                        className="rounded bg-red-600 px-4 py-2 text-white"
                      >
                        Delete
                      </button>
                    </div>
                  </td>
                </tr>
              ))
            ) : (
              <tr>
                <td colSpan={5}>
                  No agencies found.
                </td>
              </tr>
            )}
          </tbody>
        </table>
      </div>

      {/* Delete Confirmation Modal */}
      {selectedAgencyId !== null && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
          <div className="w-[400px] rounded-lg bg-white p-6 shadow-lg">
            <h2 className="text-xl font-semibold">
              Delete Agency
            </h2>

            <p className="mt-3 text-gray-600">
              Are you sure you want to delete this agency?
            </p>

            <div className="mt-6 flex justify-end gap-3">
              {/* Cancel */}
              <button
                type="button"
                onClick={handleCancelDelete}
                disabled={isDeleting}
                className="rounded border px-4 py-2"
              >
                Cancel
              </button>

              {/* Confirm */}
              <button
                type="button"
                onClick={handleConfirmDelete}
                disabled={isDeleting}
                className="rounded bg-red-600 px-4 py-2 text-white"
              >
                {isDeleting ? "Deleting..." : "Confirm"}
              </button>
            </div>
          </div>
        </div>
      )}
    </>
  );
};

export default AgencyTable;

Add Property navigation

const handleAddProperty = (agencyId: number) => {
  navigate(`/admin/properties/add/${agencyId}`);
};

For example, agency ID 5 par click karne par:

/admin/properties/add/5

route open hoga.

Aapka AddProperty component separate file mein rahega aur useParams() se agencyId receive karega.