himanshu-toolkit 1.0.1 → 1.0.2

package/App1.jsx

@@ -0,0 +1,305 @@
+import React, { useState, useEffect } from 'react';
+import 'bootstrap/dist/css/bootstrap.min.css';
+
+const API = 'http://localhost:5000/api/properties'; // Keep this URL only if your backend uses /api/cars.
+const emptyProperty = {
+    ownerName: '', propertyType: '', propertyLocation: '',
+    numberOfBedrooms: '', furnishingType: '', monthlyRent: '',
+    securityDeposit: '', availablefromDate: ''
+};
+
+// FIX: These options are used to populate the Number of Bedrooms/Property Size dropdown.
+const propertyOptions = {
+    Flat: ['1BHK', '2BHK', '3BHK', '4BHK'],
+    Bunglow: ['2000sqft', '3000sqft', '5000sqft'],
+    Shop: ['Ground Floor', 'First Floor', 'Multidimensional'],
+    Office: ['100', '500', '1000']
+};
+const furnishingOptions = ['Furnished', 'Semi-Furnished', 'Unfurnished'];
+const get = (item, camel, snake) => item[camel] ?? item[snake] ?? '';
+
+export default function App() {
+    const [property, setProperty] = useState({ ...emptyProperty });
+    // FIX: The original declared `property` state twice and used an undefined `setCars`.
+    const [properties, setProperties] = useState([]);
+    const [editId, setEditId] = useState(null);
+    const [success, setSuccess] = useState('');
+    const [error, setError] = useState('');
+
+    const fetchProperty = async () => {
+        try {
+            const res = await fetch(API);
+            if (!res.ok) throw new Error('Failed to fetch property records');
+            setProperties(await res.json());
+        } catch (err) {
+            console.error('Fetch error:', err);
+            setError('Could not load properties. Check your backend server.');
+        }
+    };
+
+    useEffect(() => { fetchProperty(); }, []);
+
+    const onTextChange = ({ target: { name, value } }) => {
+        // FIX: Use setProperty, not the undefined setCar; reset the dependent dropdown when type changes.
+        setProperty(prev => ({
+            ...prev,
+            [name]: value,
+            ...(name === 'propertyType' ? { numberOfBedrooms: '' } : {})
+        }));
+        setSuccess('');
+        setError('');
+    };
+
+    const validateForm = () => {
+        if (!property.ownerName.trim() || !property.propertyType ||
+            !property.propertyLocation.trim() || !property.numberOfBedrooms ||
+            !property.furnishingType || property.monthlyRent === '' ||
+            property.securityDeposit === '' || !property.availablefromDate)
+            return 'Please fill in all required fields.';
+
+        if (property.ownerName.trim().length > 25)
+            return 'Owner name cannot exceed 25 characters.';
+        if (!propertyOptions[property.propertyType]?.includes(property.numberOfBedrooms))
+            return 'Please select a valid property size.';
+        if (!furnishingOptions.includes(property.furnishingType))
+            return 'Please select a valid furnishing type.';
+
+        const rent = Number(property.monthlyRent);
+        const deposit = Number(property.securityDeposit);
+        if (!Number.isFinite(rent) || rent <= 0)
+            return 'Monthly rent must be greater than zero.';
+        if (!Number.isFinite(deposit) || deposit < 0)
+            return 'Security deposit must be zero or greater.';
+
+        // FIX: A date input returns YYYY-MM-DD, not a number. Compare date strings in this format.
+        const today = new Date().toISOString().slice(0, 10);
+        if (!/^\d{4}-\d{2}-\d{2}$/.test(property.availablefromDate) ||
+            property.availablefromDate < today)
+            return 'Available-from date must be today or in the future.';
+
+        return '';
+    };
+
+    const resetForm = () => {
+        setProperty({ ...emptyProperty });
+        setEditId(null);
+    };
+
+    const handleSaveRecord = async e => {
+        e.preventDefault();
+        setSuccess('');
+        setError('');
+
+        const validationError = validateForm();
+        if (validationError) return setError(validationError);
+
+        const payload = {
+            ...property,
+            ownerName: property.ownerName.trim(),
+            propertyLocation: property.propertyLocation.trim(),
+            monthlyRent: Number(property.monthlyRent),
+            securityDeposit: Number(property.securityDeposit)
+            // FIX: Keep the date as YYYY-MM-DD; do not convert it to Number().
+        };
+
+        try {
+            const res = await fetch(editId !== null ? `${API}/${editId}` : API, {
+                method: editId !== null ? 'PUT' : 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(payload)
+            });
+            const result = await res.json();
+            if (!res.ok) throw new Error(result.error || 'Failed to save property details.');
+
+            setSuccess(editId !== null
+                ? 'Property details updated successfully!'
+                : 'Property listed successfully!');
+            resetForm();
+            await fetchProperty();
+        } catch (err) {
+            console.error('Save error:', err);
+            setError(err.message);
+        }
+    };
+
+    const handleEdit = item => {
+        // FIX: The original used setCar and omitted the date; load every property field into setProperty.
+        setProperty({
+            ownerName: get(item, 'ownerName', 'owner_name'),
+            propertyType: get(item, 'propertyType', 'property_type'),
+            propertyLocation: get(item, 'propertyLocation', 'property_location'),
+            numberOfBedrooms: get(item, 'numberOfBedrooms', 'number_of_bedrooms'),
+            furnishingType: get(item, 'furnishingType', 'furnishing_type'),
+            monthlyRent: String(get(item, 'monthlyRent', 'monthly_rent')),
+            securityDeposit: String(get(item, 'securityDeposit', 'security_deposit')),
+            availablefromDate: String(get(item, 'availablefromDate', 'available_from_date')).slice(0, 10)
+        });
+        setEditId(item.id ?? item.ID);
+        setSuccess('');
+        setError('');
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+    };
+
+    const handleDelete = async id => {
+        if (!window.confirm('Are you sure you want to delete this property listing?')) return;
+        setSuccess('');
+        setError('');
+
+        try {
+            const res = await fetch(`${API}/${id}`, { method: 'DELETE' });
+            const result = await res.json();
+            if (!res.ok) throw new Error(result.error || 'Failed to delete property listing.');
+            if (String(editId) === String(id)) resetForm();
+            setSuccess('Property listing deleted successfully!');
+            await fetchProperty();
+        } catch (err) {
+            console.error('Delete error:', err);
+            setError(err.message);
+        }
+    };
+
+    const handleCancel = () => {
+        resetForm();
+        setSuccess('');
+        setError('');
+    };
+
+    return (
+        <div className="container mt-5 mb-5">
+            <h2 className="text-center mb-2">Property Rental Management</h2>
+            <p className="text-center text-muted mb-4">List your property for rent</p>
+
+            {success && <div className="alert alert-success" role="status">{success}</div>}
+            {error && <div className="alert alert-danger" role="alert">{error}</div>}
+
+            <div className="card shadow p-4 mb-5">
+                <h4 className="mb-3">{editId !== null ? 'Edit Property Listing' : 'List Your Property'}</h4>
+                <form onSubmit={handleSaveRecord}>
+                    <div className="row">
+                        <div className="col-md-6 mb-3">
+                            <label className="form-label">Owner Name</label>
+                            <input type="text" name="ownerName" className="form-control"
+                                value={property.ownerName} onChange={onTextChange} maxLength={25}
+                                placeholder="Enter owner name" required />
+                            <small className="text-muted">Maximum 25 characters</small>
+                        </div>
+
+                        <div className="col-md-6 mb-3">
+                            <label className="form-label">Property Type</label>
+                            <select name="propertyType" className="form-select"
+                                value={property.propertyType} onChange={onTextChange} required>
+                                <option value="">Select property type</option>
+                                {Object.keys(propertyOptions).map(type =>
+                                    <option key={type} value={type}>{type}</option>
+                                )}
+                            </select>
+                        </div>
+
+                        <div className="col-md-6 mb-3">
+                            <label className="form-label">Property Size / Bedrooms</label>
+                            {/* FIX: Use the correct field name and property state, not numberOfBedroomss/car.carModel. */}
+                            <select name="numberOfBedrooms" className="form-select"
+                                value={property.numberOfBedrooms} onChange={onTextChange}
+                                disabled={!property.propertyType} required>
+                                <option value="">Select property size</option>
+                                {(propertyOptions[property.propertyType] || []).map(option =>
+                                    <option key={option} value={option}>{option}</option>
+                                )}
+                            </select>
+                        </div>
+
+                        <div className="col-md-6 mb-3">
+                            <label className="form-label">Property Location</label>
+                            <input type="text" name="propertyLocation" className="form-control"
+                                value={property.propertyLocation} onChange={onTextChange}
+                                placeholder="Enter property location" required />
+                        </div>
+
+                        <div className="col-md-6 mb-3">
+                            <label className="form-label">Furnishing Type</label>
+                            {/* FIX: Use furnishingType as the field name and furnishingOptions as the options array. */}
+                            <select name="furnishingType" className="form-select"
+                                value={property.furnishingType} onChange={onTextChange} required>
+                                <option value="">Select furnishing type</option>
+                                {furnishingOptions.map(option =>
+                                    <option key={option} value={option}>{option}</option>
+                                )}
+                            </select>
+                        </div>
+
+                        <div className="col-md-6 mb-3">
+                            <label className="form-label">Monthly Rent (₹)</label>
+                            <input type="number" name="monthlyRent" className="form-control"
+                                value={property.monthlyRent} onChange={onTextChange}
+                                min="0.01" step="0.01" placeholder="Enter monthly rent" required />
+                        </div>
+
+                        <div className="col-md-6 mb-3">
+                            <label className="form-label">Security Deposit (₹)</label>
+                            <input type="number" name="securityDeposit" className="form-control"
+                                value={property.securityDeposit} onChange={onTextChange}
+                                min="0" step="0.01" placeholder="Enter security deposit" required />
+                        </div>
+
+                        <div className="col-md-6 mb-3">
+                            <label className="form-label">Available From</label>
+                            <input type="date" name="availablefromDate" className="form-control"
+                                value={property.availablefromDate} onChange={onTextChange}
+                                min={new Date().toISOString().slice(0, 10)} required />
+                        </div>
+                    </div>
+
+                    <button type="submit" className="btn btn-primary">
+                        {editId !== null ? 'Update Property' : 'List Property'}
+                    </button>
+                    {editId !== null &&
+                        <button type="button" className="btn btn-secondary ms-2" onClick={handleCancel}>
+                            Cancel
+                        </button>
+                    }
+                </form>
+            </div>
+
+            <h4 className="mb-3">Property Listings</h4>
+            <div className="table-responsive">
+                {/* FIX: The original table displayed car fields. These columns now match the property form. */}
+                <table className="table table-bordered table-striped table-hover align-middle">
+                    <thead className="table-dark">
+                        <tr>
+                            <th>ID</th><th>Owner</th><th>Type</th><th>Location</th>
+                            <th>Bedrooms / Size</th><th>Furnishing</th><th>Monthly Rent</th>
+                            <th>Deposit</th><th>Available From</th><th>Actions</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {!properties.length ? (
+                            <tr><td colSpan="10" className="text-center">No property listings found</td></tr>
+                        ) : properties.map(item => {
+                            const id = item.id ?? item.ID;
+                            return (
+                                <tr key={id}>
+                                    <td>{id}</td>
+                                    <td>{get(item, 'ownerName', 'owner_name')}</td>
+                                    <td>{get(item, 'propertyType', 'property_type')}</td>
+                                    <td>{get(item, 'propertyLocation', 'property_location')}</td>
+                                    <td>{get(item, 'numberOfBedrooms', 'number_of_bedrooms')}</td>
+                                    <td>{get(item, 'furnishingType', 'furnishing_type')}</td>
+                                    <td>₹{Number(get(item, 'monthlyRent', 'monthly_rent')).toLocaleString('en-IN')}</td>
+                                    <td>₹{Number(get(item, 'securityDeposit', 'security_deposit')).toLocaleString('en-IN')}</td>
+                                    <td>{String(get(item, 'availablefromDate', 'available_from_date')).slice(0, 10)}</td>
+                                    <td>
+                                        <button type="button" className="btn btn-warning btn-sm me-2 mb-1"
+                                            onClick={() => handleEdit(item)}>Edit</button>
+                                        <button type="button" className="btn btn-danger btn-sm mb-1"
+                                            onClick={() => handleDelete(id)}>Delete</button>
+                                    </td>
+                                </tr>
+                            );
+                        })}
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    );
+}
+

package/database1.sql

@@ -0,0 +1,17 @@
+CREATE DATABASE IF NOT EXISTS property_rental_db;
+USE property_rental_db;
+
+CREATE TABLE IF NOT EXISTS properties (
+  id INT AUTO_INCREMENT PRIMARY KEY,
+  owner_name VARCHAR(25) NOT NULL,
+  property_type ENUM('Flat', 'Bunglow', 'Shop', 'Office') NOT NULL,
+  property_location VARCHAR(255) NOT NULL,
+  number_of_bedrooms VARCHAR(50) NOT NULL,
+  furnishing_type ENUM('Furnished', 'Semi-Furnished', 'Unfurnished') NOT NULL,
+  monthly_rent DECIMAL(12,2) NOT NULL,
+  security_deposit DECIMAL(12,2) NOT NULL DEFAULT 0,
+  available_from_date DATE NOT NULL,
+  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+);
+
+select *from properties;

package/package.json

@@ -1,18 +1,22 @@
 {
   "name": "himanshu-toolkit",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "My reusable full-stack application toolkit",
   "main": "server.js",
   "files": [
     "App.jsx",
+    "App1.jsx",
+    "database.sql",
+    "database1.sql",
     "server.js",
-    "database.sql"
+    "server1.js"
   ],
   "keywords": [
     "react",
     "nodejs",
     "mysql",
-    "fullstack"
+    "fullstack",
+    "utilities"
   ],
   "author": "Himanshu",
   "license": "MIT",

package/server1.js

@@ -0,0 +1,182 @@
+
+const express = require('express');
+const mysql = require('mysql2');
+const cors = require('cors');
+
+const app = express();
+app.use(cors(), express.json());
+
+const db = mysql.createConnection({
+    host: 'localhost',
+    user: 'root',
+    password: process.env.DB_PASSWORD || 'Himanshu@0334',
+    database: 'property_rental_db'
+});
+
+db.connect(err => {
+    if (err) return console.error('MySQL connection error:', err.message);
+    console.log('Connected to Property Rental Database!');
+});
+
+const propertySizes = {
+    Flat: ['1BHK', '2BHK', '3BHK', '4BHK'],
+    Bunglow: ['2000sqft', '3000sqft', '5000sqft'],
+    Shop: ['Ground Floor', 'First Floor', 'Multidimensional'],
+    Office: ['100', '500', '1000']
+};
+
+const furnishingTypes = ['Furnished', 'Semi-Furnished', 'Unfurnished'];
+
+const columns = [
+    'ownerName', 'propertyType', 'propertyLocation',
+    'numberOfBedrooms', 'furnishingType', 'monthlyRent',
+    'securityDeposit', 'availablefromDate'
+];
+
+const validateProperty = p => {
+    if (typeof p.ownerName !== 'string' ||
+        !p.ownerName.trim() || p.ownerName.trim().length > 25)
+        return 'Owner name is required and cannot exceed 25 characters.';
+
+    if (!Object.hasOwn(propertySizes, p.propertyType))
+        return 'Please select a valid property type.';
+
+    if (typeof p.propertyLocation !== 'string' || !p.propertyLocation.trim())
+        return 'Property location is required.';
+
+    if (!propertySizes[p.propertyType].includes(p.numberOfBedrooms))
+        return 'Please select a valid size for the property type.';
+
+    if (!furnishingTypes.includes(p.furnishingType))
+        return 'Please select a valid furnishing type.';
+
+    for (const field of ['monthlyRent', 'securityDeposit']) {
+        const value = Number(p[field]);
+        if (p[field] === '' || p[field] == null ||
+            !Number.isFinite(value) || value < 0 ||
+            (field === 'monthlyRent' && value === 0))
+            return `${field} must be a valid ${field === 'monthlyRent' ? 'positive' : 'non-negative'} amount.`;
+    }
+
+    if (typeof p.availablefromDate !== 'string' ||
+        !/^\d{4}-\d{2}-\d{2}$/.test(p.availablefromDate) ||
+        !Number.isFinite(Date.parse(p.availablefromDate)) ||
+        new Date(p.availablefromDate).toISOString().slice(0, 10) !== p.availablefromDate)
+        return 'Please enter a valid availability date (YYYY-MM-DD).';
+
+    return null;
+};
+
+const getValues = p => [
+    p.ownerName.trim(),
+    p.propertyType,
+    p.propertyLocation.trim(),
+    p.numberOfBedrooms,
+    p.furnishingType,
+    Number(p.monthlyRent),
+    Number(p.securityDeposit),
+    p.availablefromDate
+];
+
+const fail = (res, status, error) => res.status(status).json({ error });
+
+app.get('/api/properties', (req, res) => {
+    db.query(
+        `SELECT id, owner_name AS ownerName,
+         property_type AS propertyType,
+         property_location AS propertyLocation,
+         number_of_bedrooms AS numberOfBedrooms,
+         furnishing_type AS furnishingType,
+         monthly_rent AS monthlyRent,
+         security_deposit AS securityDeposit,
+         available_from_date AS availablefromDate
+         FROM properties ORDER BY id DESC`,
+        (err, rows) => {
+            if (err) {
+                console.error('Fetch error:', err.message);
+                return fail(res, 500, 'Failed to fetch properties.');
+            }
+            res.json(rows);
+        }
+    );
+});
+
+app.post('/api/properties', (req, res) => {
+    const error = validateProperty(req.body);
+    if (error) return fail(res, 400, error);
+
+    const sql = `INSERT INTO properties
+        (owner_name, property_type, property_location,
+         number_of_bedrooms, furnishing_type, monthly_rent,
+         security_deposit, available_from_date)
+         VALUES (?, ?, ?, ?, ?, ?, ?, ?)`;
+
+    db.query(sql, getValues(req.body), (err, result) => {
+        if (err) {
+            console.error('Insert error:', err.message);
+            return fail(res, 500, 'Failed to add property.');
+        }
+        res.status(201).json({
+            message: 'Property added successfully!',
+            id: result.insertId
+        });
+    });
+});
+
+app.put('/api/properties/:id', (req, res) => {
+    const id = Number(req.params.id);
+    if (!Number.isSafeInteger(id) || id <= 0)
+        return fail(res, 400, 'Invalid property ID.');
+
+    const error = validateProperty(req.body);
+    if (error) return fail(res, 400, error);
+
+    const sql = `UPDATE properties SET
+        owner_name = ?, property_type = ?, property_location = ?,
+        number_of_bedrooms = ?, furnishing_type = ?, monthly_rent = ?,
+        security_deposit = ?, available_from_date = ?
+        WHERE id = ?`;
+
+    db.query(sql, [...getValues(req.body), id], (err, result) => {
+        if (err) {
+            console.error('Update error:', err.message);
+            return fail(res, 500, 'Failed to update property.');
+        }
+        if (result.affectedRows)
+            return res.json({ message: 'Property updated successfully!' });
+
+        db.query('SELECT id FROM properties WHERE id = ?', [id], (err, rows) => {
+            if (err) return fail(res, 500, 'Failed to verify property.');
+            if (!rows.length) return fail(res, 404, 'Property not found.');
+            res.json({ message: 'Property details are already up to date.' });
+        });
+    });
+});
+
+app.delete('/api/properties/:id', (req, res) => {
+    const id = Number(req.params.id);
+    if (!Number.isSafeInteger(id) || id <= 0)
+        return fail(res, 400, 'Invalid property ID.');
+
+    db.query('DELETE FROM properties WHERE id = ?', [id], (err, result) => {
+        if (err) {
+            console.error('Delete error:', err.message);
+            return fail(res, 500, 'Failed to delete property.');
+        }
+        if (!result.affectedRows)
+            return fail(res, 404, 'Property not found.');
+
+        res.json({ message: 'Property deleted successfully!' });
+    });
+});
+
+app.use((err, req, res, next) => {
+    if (err instanceof SyntaxError && err.status === 400)
+        return fail(res, 400, 'Invalid JSON request body.');
+    console.error(err);
+    res.status(500).json({ error: 'Internal server error.' });
+});
+
+app.listen(5000, () =>
+    console.log('Server running at http://localhost:5000')
+);