himanshu-toolkit 0.0.0-stage → 1.0.0

package/App.jsx

@@ -0,0 +1,272 @@
+import { useState, useEffect } from 'react';
+import 'bootstrap/dist/css/bootstrap.min.css';
+
+const API = 'http://localhost:5000/api/cars';
+const currentYear = new Date().getFullYear();
+const emptyCar = {
+    ownerName: '', carBrand: '', carModel: '', fuelType: '',
+    manufacturingYear: '', sellingPrice: '', kilometersDriven: '',
+    contactNumber: '', negotiable: false
+};
+const carModels = {
+    'Maruti Suzuki': ['Swift', 'Baleno', 'Brezza', 'Dzire', 'Wagon R', 'Alto'],
+    Hyundai: ['i20', 'Creta', 'Venue', 'Verna', 'Grand i10 Nios'],
+    Tata: ['Nexon', 'Punch', 'Tiago', 'Altroz', 'Harrier'],
+    Honda: ['City', 'Amaze', 'Jazz', 'Elevate', 'WR-V']
+};
+const fuels = ['Petrol', 'Diesel', 'CNG', 'Electric'];
+const get = (item, camel, snake) => item[camel] ?? item[snake] ?? '';
+
+function Home() {
+    const [car, setCar] = useState({ ...emptyCar });
+    const [cars, setCars] = useState([]);
+    const [editId, setEditId] = useState(null);
+    const [success, setSuccess] = useState('');
+    const [error, setError] = useState('');
+
+    const fetchCars = async () => {
+        try {
+            const res = await fetch(API);
+            if (!res.ok) throw new Error();
+            setCars(await res.json());
+        } catch (err) {
+            console.error('Fetch error:', err);
+            setError('Could not load cars. Check your backend server.');
+        }
+    };
+    useEffect(() => { fetchCars(); }, []);
+
+    const onTextChange = ({ target: { name, value, type, checked } }) => {
+        setCar(prev => ({
+            ...prev, [name]: type === 'checkbox' ? checked : value,
+            ...(name === 'carBrand' ? { carModel: '' } : {})
+        }));
+        setSuccess('');
+        setError('');
+    };
+
+    const validateForm = () => {
+        if (!car.ownerName.trim() || !car.carBrand || !car.carModel || !car.fuelType ||
+            !car.manufacturingYear || car.sellingPrice === '' ||
+            car.kilometersDriven === '' || !car.contactNumber.trim())
+            return 'Please fill in all required fields.';
+        if (car.ownerName.trim().length > 25) return 'Owner name cannot exceed 25 characters.';
+        if (!carModels[car.carBrand]?.includes(car.carModel)) return 'Please select a valid car model.';
+        if (!fuels.includes(car.fuelType)) return 'Please select a valid fuel type.';
+
+        const year = Number(car.manufacturingYear), price = Number(car.sellingPrice),
+            km = Number(car.kilometersDriven);
+        if (!Number.isInteger(year) || year < 1886 || year > currentYear)
+            return `Enter a valid manufacturing year between 1886 and ${currentYear}.`;
+        if (!Number.isFinite(price) || price <= 0) return 'Selling price must be greater than zero.';
+        if (!Number.isFinite(km) || km < 0) return 'Kilometers driven must be zero or greater.';
+        if (!/^[0-9]{10}$/.test(car.contactNumber.trim()))
+            return 'Contact number must contain exactly 10 digits.';
+        return '';
+    };
+
+    const resetForm = () => { setCar({ ...emptyCar }); setEditId(null); };
+    const handleSaveRecord = async e => {
+        e.preventDefault();
+        setSuccess(''); setError('');
+        const validationError = validateForm();
+        if (validationError) return setError(validationError);
+
+        const payload = {
+            ...car, ownerName: car.ownerName.trim(),
+            manufacturingYear: Number(car.manufacturingYear),
+            sellingPrice: Number(car.sellingPrice),
+            kilometersDriven: Number(car.kilometersDriven),
+            contactNumber: car.contactNumber.trim()
+        };
+        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 car details.');
+            setSuccess(editId !== null ? 'Car details updated successfully!' : 'Car listed for sale successfully!');
+            resetForm();
+            await fetchCars();
+        } catch (err) {
+            console.error('Save error:', err);
+            setError(err.message);
+        }
+    };
+
+    const handleEdit = item => {
+        setCar({
+            ownerName: get(item, 'ownerName', 'owner_name'),
+            carBrand: get(item, 'carBrand', 'car_brand'),
+            carModel: get(item, 'carModel', 'car_model'),
+            fuelType: get(item, 'fuelType', 'fuel_type'),
+            manufacturingYear: String(get(item, 'manufacturingYear', 'manufacturing_year')),
+            sellingPrice: String(get(item, 'sellingPrice', 'selling_price')),
+            kilometersDriven: String(get(item, 'kilometersDriven', 'kilometers_driven')),
+            contactNumber: String(get(item, 'contactNumber', 'contact_number')),
+            negotiable: Boolean(item.negotiable)
+        });
+        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 car 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 car listing.');
+            if (String(editId) === String(id)) resetForm();
+            setSuccess('Car listing deleted successfully!');
+            await fetchCars();
+        } 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">Used Car Selling Management System</h2>
+            <p className="text-center text-muted mb-4">List your used car for sale</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 Car Listing' : 'Sell Your Car'}</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={car.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">Car Brand</label>
+                            <select name="carBrand" className="form-select" value={car.carBrand}
+                                onChange={onTextChange} required>
+                                <option value="">Select car brand</option>
+                                {Object.keys(carModels).map(brand => <option key={brand} value={brand}>{brand}</option>)}
+                            </select>
+                        </div>
+
+                        <div className="col-md-6 mb-3">
+                            <label className="form-label">Car Model</label>
+                            <select name="carModel" className="form-select" value={car.carModel}
+                                onChange={onTextChange} disabled={!car.carBrand} required>
+                                <option value="">Select car model</option>
+                                {(carModels[car.carBrand] || []).map(model => <option key={model} value={model}>{model}</option>)}
+                            </select>
+                        </div>
+
+                        <div className="col-md-6 mb-3">
+                            <label className="form-label">Fuel Type</label>
+                            <select name="fuelType" className="form-select" value={car.fuelType}
+                                onChange={onTextChange} required>
+                                <option value="">Select fuel type</option>
+                                {fuels.map(fuel => <option key={fuel} value={fuel}>{fuel}</option>)}
+                            </select>
+                        </div>
+
+                        <div className="col-md-6 mb-3">
+                            <label className="form-label">Manufacturing Year</label>
+                            <input type="number" name="manufacturingYear" className="form-control"
+                                value={car.manufacturingYear} onChange={onTextChange} min="1886"
+                                max={currentYear} step="1" placeholder="e.g. 2020" required />
+                        </div>
+
+                        <div className="col-md-6 mb-3">
+                            <label className="form-label">Selling Price (₹)</label>
+                            <input type="number" name="sellingPrice" className="form-control"
+                                value={car.sellingPrice} onChange={onTextChange} min="0.01"
+                                step="0.01" placeholder="Enter selling price" required />
+                        </div>
+
+                        <div className="col-md-6 mb-3">
+                            <label className="form-label">Kilometers Driven</label>
+                            <input type="number" name="kilometersDriven" className="form-control"
+                                value={car.kilometersDriven} onChange={onTextChange} min="0"
+                                step="1" placeholder="e.g. 45000" required />
+                        </div>
+
+                        <div className="col-md-6 mb-3">
+                            <label className="form-label">Contact Number</label>
+                            <input type="tel" name="contactNumber" className="form-control"
+                                value={car.contactNumber} onChange={onTextChange} maxLength={10}
+                                pattern="[0-9]{10}" inputMode="numeric"
+                                placeholder="Enter 10-digit number" required />
+                        </div>
+
+                        <div className="col-12 mb-3">
+                            <div className="form-check">
+                                <input type="checkbox" name="negotiable" className="form-check-input"
+                                    id="negotiable" checked={car.negotiable} onChange={onTextChange} />
+                                <label className="form-check-label" htmlFor="negotiable">Price is negotiable</label>
+                            </div>
+                        </div>
+                    </div>
+
+                    <button type="submit" className="btn btn-primary">
+                        {editId !== null ? 'Update Car' : 'List Car for Sale'}
+                    </button>
+                    {editId !== null && <button type="button" className="btn btn-secondary ms-2" onClick={handleCancel}>Cancel</button>}
+                </form>
+            </div>
+
+            <h4 className="mb-3">Used Car Listings</h4>
+            <div className="table-responsive">
+                <table className="table table-bordered table-striped table-hover align-middle">
+                    <thead className="table-dark">
+                        <tr>
+                            <th>ID</th><th>Owner</th><th>Brand</th><th>Model</th><th>Fuel</th>
+                            <th>Year</th><th>Price (₹)</th><th>Kilometers</th><th>Contact</th>
+                            <th>Negotiable</th><th>Actions</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {!cars.length ? (
+                            <tr><td colSpan="11" className="text-center">No car listings found</td></tr>
+                        ) : cars.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, 'carBrand', 'car_brand')}</td>
+                                    <td>{get(item, 'carModel', 'car_model')}</td>
+                                    <td>{get(item, 'fuelType', 'fuel_type')}</td>
+                                    <td>{get(item, 'manufacturingYear', 'manufacturing_year')}</td>
+                                    <td>₹{Number(get(item, 'sellingPrice', 'selling_price')).toLocaleString('en-IN')}</td>
+                                    <td>{Number(get(item, 'kilometersDriven', 'kilometers_driven')).toLocaleString('en-IN')} km</td>
+                                    <td>{get(item, 'contactNumber', 'contact_number')}</td>
+                                    <td>{[true, 1, '1'].includes(item.negotiable) ? 'Yes' : 'No'}</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>
+    );
+}
+
+export default Home;

package/package.json

@@ -1,6 +1,9 @@
 {
   "name": "himanshu-toolkit",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "1.0.0",
+  "description": "My own reusable JavaScript package",
+  "main": "index.js",
+  "keywords": ["javascript", "utility"],
+  "author": "Himanshu",
+  "license": "MIT"
 }

package/server.js

@@ -0,0 +1,154 @@
+
+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: 'used_car_db'
+});
+
+db.connect(err => {
+    if (err) return console.error('MySQL connection error:', err.message);
+    console.log('Connected to Used Car Database!');
+});
+
+const carModels = {
+    'Maruti Suzuki': ['Swift', 'Baleno', 'Brezza', 'Dzire', 'Wagon R', 'Alto'],
+    Hyundai: ['i20', 'Creta', 'Venue', 'Verna', 'Grand i10 Nios'],
+    Tata: ['Nexon', 'Punch', 'Tiago', 'Altroz', 'Harrier'],
+    Honda: ['City', 'Amaze', 'Jazz', 'Elevate', 'WR-V']
+};
+
+const fuelTypes = ['Petrol', 'Diesel', 'CNG', 'Electric'];
+
+function validateCar(c) {
+    const year = Number(c.manufacturingYear);
+    const price = Number(c.sellingPrice);
+    const km = Number(c.kilometersDriven);
+    const currentYear = new Date().getFullYear();
+
+    if (typeof c.ownerName !== 'string' || !c.ownerName.trim() || c.ownerName.trim().length > 25)
+        return 'Owner name is required and cannot exceed 25 characters.';
+    if (!Object.prototype.hasOwnProperty.call(carModels, c.carBrand))
+        return 'Please select a valid car brand.';
+    if (!carModels[c.carBrand].includes(c.carModel))
+        return 'Please select a valid model for the selected brand.';
+    if (!fuelTypes.includes(c.fuelType))
+        return 'Please select a valid fuel type.';
+    if (c.manufacturingYear === '' || c.manufacturingYear == null ||
+        !Number.isInteger(year) || year < 1886 || year > currentYear)
+        return `Manufacturing year must be between 1886 and ${currentYear}.`;
+    if (c.sellingPrice === '' || c.sellingPrice == null ||
+        !Number.isFinite(price) || price <= 0)
+        return 'Selling price must be greater than zero.';
+    if (c.kilometersDriven === '' || c.kilometersDriven == null ||
+        !Number.isSafeInteger(km) || km < 0)
+        return 'Kilometers driven must be a non-negative whole number.';
+    if (typeof c.contactNumber !== 'string' || !/^[0-9]{10}$/.test(c.contactNumber))
+        return 'Contact number must contain exactly 10 digits.';
+    if (c.negotiable !== undefined && typeof c.negotiable !== 'boolean')
+        return 'Negotiable must be true or false.';
+
+    return null;
+}
+
+const columns = [
+    'ownerName', 'carBrand', 'carModel', 'fuelType',
+    'manufacturingYear', 'sellingPrice', 'kilometersDriven',
+    'contactNumber', 'negotiable'
+];
+
+const getValues = c => [
+    c.ownerName.trim(), c.carBrand, c.carModel, c.fuelType,
+    Number(c.manufacturingYear), Number(c.sellingPrice),
+    Number(c.kilometersDriven), c.contactNumber, c.negotiable ?? false
+];
+
+const fail = (res, status, error) => res.status(status).json({ error });
+
+app.get('/api/cars', (req, res) => {
+    db.query('SELECT * FROM cars ORDER BY id DESC', (err, rows) => {
+        if (err) {
+            console.error('Fetch error:', err.message);
+            return fail(res, 500, 'Failed to fetch car listings.');
+        }
+        res.json(rows);
+    });
+});
+
+app.post('/api/cars', (req, res) => {
+    const error = validateCar(req.body);
+    if (error) return fail(res, 400, error);
+
+    const sql = `INSERT INTO cars (${columns.join(', ')})
+                 VALUES (${columns.map(() => '?').join(', ')})`;
+
+    db.query(sql, getValues(req.body), (err, result) => {
+        if (err) {
+            console.error('Insert error:', err.message);
+            return fail(res, 500, 'Failed to add car listing.');
+        }
+        res.status(201).json({
+            message: 'Car listed for sale successfully!',
+            id: result.insertId
+        });
+    });
+});
+
+app.put('/api/cars/:id', (req, res) => {
+    const id = Number(req.params.id);
+    if (!Number.isSafeInteger(id) || id <= 0)
+        return fail(res, 400, 'Invalid car ID.');
+
+    const error = validateCar(req.body);
+    if (error) return fail(res, 400, error);
+
+    const sql = `UPDATE cars SET ${columns.map(c => `${c} = ?`).join(', ')} 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 car listing.');
+        }
+
+        if (result.affectedRows)
+            return res.json({ message: 'Car details updated successfully!' });
+
+        db.query('SELECT id FROM cars WHERE id = ?', [id], (err, rows) => {
+            if (err) return fail(res, 500, 'Failed to verify car listing.');
+            if (!rows.length) return fail(res, 404, 'Car listing not found.');
+            res.json({ message: 'Car details are already up to date.' });
+        });
+    });
+});
+
+app.delete('/api/cars/:id', (req, res) => {
+    const id = Number(req.params.id);
+    if (!Number.isSafeInteger(id) || id <= 0)
+        return fail(res, 400, 'Invalid car ID.');
+
+    db.query('DELETE FROM cars WHERE id = ?', [id], (err, result) => {
+        if (err) {
+            console.error('Delete error:', err.message);
+            return fail(res, 500, 'Failed to delete car listing.');
+        }
+        if (!result.affectedRows)
+            return fail(res, 404, 'Car listing not found.');
+
+        res.json({ message: 'Car listing deleted successfully!' });
+    });
+});
+
+app.use((err, req, res, next) => {
+    if (err instanceof SyntaxError && err.status === 400)
+        return fail(res, 400, 'Invalid JSON request body.');
+    next(err);
+});
+
+app.listen(5000, () => console.log('Server running at http://localhost:5000'));

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.