himanshu-toolkit 1.0.2 → 1.0.4

package/App2.jsx

@@ -0,0 +1,244 @@
+import React, { useState, useEffect } from 'react';
+import 'bootstrap/dist/css/bootstrap.min.css';
+
+const API = 'http://localhost:5000/api/laptops';
+const emptyLaptop = {
+  sellerName: '', laptopBrand: '', laptopModel: '', processorType: '',
+  laptopRam: '', storageType: '', laptopColor: '', sellingPrice: '',
+  contactNumber: '', Negotiable: false
+};
+const laptopOptions = {
+  HP: ['Pavilion', 'Omen', 'EliteBook', 'G16'],
+  Dell: ['Inspiron', 'Latitude', 'XPS', 'Gaming'],
+  Lenovo: ['LOQ', 'Legion', 'ThinkPad', 'IdeaPad'],
+  Apple: ['MacBook Air M1', 'MacBook Air M2', 'MacBook Pro', 'MacBook Neo']
+};
+const processorOptions = {
+  HP: ['i3', 'i5', 'i7', 'Ryzen 5', 'Ryzen 7'],
+  Dell: ['i3', 'i5', 'i7', 'Ryzen 5', 'Ryzen 7'],
+  Lenovo: ['i3', 'i5', 'i7', 'Ryzen 5', 'Ryzen 7'],
+  Apple: ['i3', 'i5', 'i7', 'Ryzen 5', 'Ryzen 7']
+};
+const ramOptions = ['4 GB', '8 GB', '16 GB', '32 GB'];
+const storageOptions = ['HDD', 'SSD'];
+const get = (item, camel, snake) => item[camel] ?? item[snake] ?? '';
+
+export default function App() {
+  const [laptop, setLaptop] = useState({ ...emptyLaptop });
+  const [laptops, setLaptops] = useState([]);
+  const [editId, setEditId] = useState(null);
+  const [success, setSuccess] = useState('');
+  const [error, setError] = useState('');
+
+  const fetchLaptops = async () => {
+    try {
+      const res = await fetch(API);
+      if (!res.ok) throw new Error('Failed to fetch laptop records.');
+      setLaptops(await res.json());
+    } catch (err) {
+      console.error('Fetch error:', err);
+      setError('Could not load laptops. Check your backend server.');
+    }
+  };
+  useEffect(() => { fetchLaptops(); }, []);
+
+  const onTextChange = ({ target: { name, value, type, checked } }) => {
+    setLaptop(prev => ({
+      ...prev,
+      [name]: type === 'checkbox' ? checked : value,
+      ...(name === 'laptopBrand' ? { laptopModel: '', processorType: '' } : {})
+    }));
+    setSuccess('');
+    setError('');
+  };
+
+  const validateForm = () => {
+    if (!laptop.sellerName.trim() || !laptop.laptopBrand || !laptop.laptopModel ||
+        !laptop.processorType || !laptop.laptopRam || !laptop.storageType ||
+        !laptop.laptopColor.trim() || laptop.sellingPrice === '' || !laptop.contactNumber)
+      return 'Please fill in all required fields.';
+    if (laptop.sellerName.trim().length > 20)
+      return 'Seller name cannot exceed 20 characters.';
+    if (!laptopOptions[laptop.laptopBrand]?.includes(laptop.laptopModel))
+      return 'Please select a valid laptop model for the selected brand.';
+    if (!processorOptions[laptop.laptopBrand]?.includes(laptop.processorType))
+      return 'Please select a valid processor type for the selected brand.';
+    if (!ramOptions.includes(laptop.laptopRam))
+      return 'RAM must be 4 GB, 8 GB, 16 GB, or 32 GB.';
+    if (!storageOptions.includes(laptop.storageType))
+      return 'Please select HDD or SSD.';
+    if (!Number.isFinite(Number(laptop.sellingPrice)) || Number(laptop.sellingPrice) <= 0)
+      return 'Selling price must be a positive number.';
+    if (!/^[0-9]{10}$/.test(laptop.contactNumber.trim()))
+      return 'Contact number must contain exactly 10 digits.';
+    return '';
+  };
+
+  const resetForm = () => {
+    setLaptop({ ...emptyLaptop });
+    setEditId(null);
+  };
+
+  const handleSaveRecord = async e => {
+    e.preventDefault();
+    setSuccess('');
+    setError('');
+    const validationError = validateForm();
+    if (validationError) return setError(validationError);
+
+    const payload = {
+      ...laptop,
+      sellerName: laptop.sellerName.trim(),
+      laptopModel: laptop.laptopModel.trim(),
+      laptopColor: laptop.laptopColor.trim(),
+      sellingPrice: Number(laptop.sellingPrice)
+    };
+    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 laptop details.');
+      setSuccess(editId !== null ? 'Laptop details updated successfully!' : 'Laptop listed successfully!');
+      resetForm();
+      await fetchLaptops();
+    } catch (err) {
+      console.error('Save error:', err);
+      setError(err.message || 'Failed to save laptop details.');
+    }
+  };
+
+  const handleEdit = item => {
+    setLaptop({
+      sellerName: get(item, 'sellerName', 'seller_name'),
+      laptopBrand: get(item, 'laptopBrand', 'laptop_brand'),
+      laptopModel: get(item, 'laptopModel', 'laptop_model'),
+      processorType: get(item, 'processorType', 'processor_type'),
+      laptopRam: get(item, 'laptopRam', 'laptop_ram'),
+      storageType: get(item, 'storageType', 'storage_type'),
+      laptopColor: get(item, 'laptopColor', 'laptop_color'),
+      sellingPrice: String(get(item, 'sellingPrice', 'selling_price')),
+      contactNumber: String(get(item, 'contactNumber', 'contact_number')),
+      Negotiable: Boolean(get(item, 'Negotiable', '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 laptop 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 laptop listing.');
+      if (String(editId) === String(id)) resetForm();
+      setSuccess('Laptop listing deleted successfully!');
+      await fetchLaptops();
+    } catch (err) {
+      console.error('Delete error:', err);
+      setError(err.message || 'Failed to delete laptop listing.');
+    }
+  };
+
+  const handleCancel = () => { resetForm(); setSuccess(''); setError(''); };
+  const fieldError = message => message && <small className="text-danger d-block">{message}</small>;
+
+  return (
+    <div className="container mt-5 mb-5">
+      <h2 className="text-center mb-2">Laptop Selling Management</h2>
+      <p className="text-center text-muted mb-4">Sell your laptop</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 Laptop Listing' : 'List Your Laptop'}</h4>
+        <form onSubmit={handleSaveRecord}>
+          <div className="row">
+            <div className="col-md-6 mb-3">
+              <label className="form-label">Seller Name</label>
+              <input type="text" name="sellerName" className="form-control" value={laptop.sellerName} onChange={onTextChange} maxLength={20} placeholder="Enter seller name" required />
+              <small className="text-muted">Maximum 20 characters</small>
+            </div>
+            <div className="col-md-6 mb-3">
+              <label className="form-label">Laptop Brand</label>
+              <select name="laptopBrand" className="form-select" value={laptop.laptopBrand} onChange={onTextChange} required>
+                <option value="">Select laptop brand</option>
+                {Object.keys(laptopOptions).map(brand => <option key={brand} value={brand}>{brand}</option>)}
+              </select>
+            </div>
+            <div className="col-md-6 mb-3">
+              <label className="form-label">Laptop Model</label>
+              <select name="laptopModel" className="form-select" value={laptop.laptopModel} onChange={onTextChange} disabled={!laptop.laptopBrand} required>
+                <option value="">Select laptop model</option>
+                {(laptopOptions[laptop.laptopBrand] || []).map(model => <option key={model} value={model}>{model}</option>)}
+              </select>
+            </div>
+            <div className="col-md-6 mb-3">
+              <label className="form-label">Processor Type</label>
+              <select name="processorType" className="form-select" value={laptop.processorType} onChange={onTextChange} disabled={!laptop.laptopBrand} required>
+                <option value="">Select processor</option>
+                {(processorOptions[laptop.laptopBrand] || []).map(p => <option key={p} value={p}>{p}</option>)}
+              </select>
+            </div>
+            <div className="col-md-6 mb-3">
+              <label className="form-label">RAM Capacity</label>
+              <select name="laptopRam" className="form-select" value={laptop.laptopRam} onChange={onTextChange} required>
+                <option value="">Select RAM capacity</option>
+                {ramOptions.map(ram => <option key={ram} value={ram}>{ram}</option>)}
+              </select>
+            </div>
+            <div className="col-md-6 mb-3">
+              <label className="form-label">Storage Type</label>
+              <select name="storageType" className="form-select" value={laptop.storageType} onChange={onTextChange} required>
+                <option value="">Select storage type</option>
+                {storageOptions.map(type => <option key={type} value={type}>{type}</option>)}
+              </select>
+            </div>
+            <div className="col-md-6 mb-3">
+              <label className="form-label">Laptop Color</label>
+              <input type="text" name="laptopColor" className="form-control" value={laptop.laptopColor} onChange={onTextChange} placeholder="Enter laptop color" 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={laptop.sellingPrice} onChange={onTextChange} min="0.01" step="any" placeholder="Enter selling price" required />
+            </div>
+            <div className="col-md-6 mb-3">
+              <label className="form-label">Contact Number</label>
+              <input type="tel" inputMode="numeric" name="contactNumber" className="form-control" value={laptop.contactNumber} onChange={onTextChange} maxLength={10} pattern="[0-9]{10}" placeholder="Enter 10-digit contact number" required />
+            </div>
+            <div className="col-md-6 mb-3 d-flex align-items-center">
+              <div className="form-check mt-3">
+                <input type="checkbox" name="Negotiable" className="form-check-input" id="Negotiable" checked={laptop.Negotiable} onChange={onTextChange} />
+                <label className="form-check-label" htmlFor="Negotiable">Negotiable</label>
+              </div>
+            </div>
+          </div>
+          <button type="submit" className="btn btn-primary">{editId !== null ? 'Update Laptop' : 'List Laptop'}</button>
+          {editId !== null && <button type="button" className="btn btn-secondary ms-2" onClick={handleCancel}>Cancel</button>}
+        </form>
+      </div>
+
+      <h4 className="mb-3">Laptop 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>Seller</th><th>Brand</th><th>Model</th><th>Processor</th><th>RAM</th><th>Storage</th><th>Color</th><th>Price</th><th>Contact</th><th>Negotiable</th><th>Actions</th>
+          </tr></thead>
+          <tbody>
+            {!laptops.length ? <tr><td colSpan="12" className="text-center">No laptop listings found</td></tr> : laptops.map(item => {
+              const id = item.id ?? item.ID;
+              return <tr key={id}>
+                <td>{id}</td><td>{get(item, 'sellerName', 'seller_name')}</td><td>{get(item, 'laptopBrand', 'laptop_brand')}</td><td>{get(item, 'laptopModel', 'laptop_model')}</td><td>{get(item, 'processorType', 'processor_type')}</td><td>{get(item, 'laptopRam', 'laptop_ram')}</td><td>{get(item, 'storageType', 'storage_type')}</td><td>{get(item, 'laptopColor', 'laptop_color')}</td><td>₹{Number(get(item, 'sellingPrice', 'selling_price')).toLocaleString('en-IN')}</td><td>{get(item, 'contactNumber', 'contact_number')}</td><td>{get(item, 'Negotiable', '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>
+  );
+}

package/database2.sql

@@ -0,0 +1,18 @@
+CREATE DATABASE IF NOT EXISTS laptop_seller;
+USE laptop_seller;
+
+CREATE TABLE IF NOT EXISTS laptops (
+    id INT AUTO_INCREMENT PRIMARY KEY,
+    seller_name VARCHAR(20) NOT NULL,
+    laptop_brand ENUM('HP', 'Dell', 'Lenovo', 'Apple') NOT NULL,
+    laptop_model VARCHAR(100) NOT NULL,
+    processor_type ENUM('i3', 'i5', 'i7', 'Ryzen 5', 'Ryzen 7') NOT NULL,
+    laptop_ram ENUM('4 GB', '8 GB', '16 GB', '32 GB') NOT NULL,
+    storage_type ENUM('HDD', 'SSD') NOT NULL,
+    laptop_color VARCHAR(30) NOT NULL,
+    selling_price DECIMAL(12,2) NOT NULL,
+    contact_number CHAR(10) NOT NULL,
+    negotiable BOOLEAN NOT NULL DEFAULT FALSE,
+    CHECK (selling_price > 0),
+    CHECK (contact_number REGEXP '^[0-9]{10}$')
+);

package/package.json

@@ -1,15 +1,18 @@
 {
   "name": "himanshu-toolkit",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "My reusable full-stack application toolkit",
   "main": "server.js",
   "files": [
     "App.jsx",
     "App1.jsx",
+    "App2.jsx",
     "database.sql",
     "database1.sql",
+    "database2.sql",
     "server.js",
-    "server1.js"
+    "server1.js",
+    "server3.js"
   ],
   "keywords": [
     "react",
@@ -23,4 +26,4 @@
   "scripts": {
     "start": "node server.js"
   }
-}
+}

package/server3.js

@@ -0,0 +1,164 @@
+
+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: 'laptop_seller'
+});
+
+db.connect(err => {
+    if (err) return console.error('MySQL error:', err.message);
+    console.log('Connected to MySQL Database!');
+});
+
+const laptopOptions = {
+    HP: ['Pavilion', 'Omen', 'EliteBook', 'G16'],
+    Dell: ['Inspiron', 'Latitude', 'XPS', 'Gaming'],
+    Lenovo: ['LOQ', 'Legion', 'ThinkPad', 'IdeaPad'],
+    Apple: ['MacBook Air M1', 'MacBook Air M2', 'MacBook Pro', 'MacBook Neo']
+};
+
+const processorOptions = {
+    HP: ['i3', 'i5', 'i7', 'Ryzen 5', 'Ryzen 7'],
+    Dell: ['i3', 'i5', 'i7', 'Ryzen 5', 'Ryzen 7'],
+    Lenovo: ['i3', 'i5', 'i7', 'Ryzen 5', 'Ryzen 7'],
+    Apple: ['i3', 'i5', 'i7', 'Ryzen 5', 'Ryzen 7']
+};
+
+const ramOptions = ['4 GB', '8 GB', '16 GB', '32 GB'];
+const storageOptions = ['HDD', 'SSD'];
+const fail = (res, status, error) => res.status(status).json({ error });
+
+function validateLaptop(l) {
+    if (typeof l.sellerName !== 'string' || !l.sellerName.trim())
+        return 'Seller name is required.';
+    if (l.sellerName.trim().length > 20)
+        return 'Seller name cannot exceed 20 characters.';
+    if (!laptopOptions[l.laptopBrand])
+        return 'Please select a valid laptop brand.';
+    if (!laptopOptions[l.laptopBrand].includes(l.laptopModel))
+        return 'Please select a valid laptop model.';
+    if (!processorOptions[l.laptopBrand].includes(l.processorType))
+        return 'Please select a valid processor.';
+    if (!ramOptions.includes(l.laptopRam))
+        return 'Please select a valid RAM capacity.';
+    if (!storageOptions.includes(l.storageType))
+        return 'Please select HDD or SSD.';
+    if (typeof l.laptopColor !== 'string' || !l.laptopColor.trim())
+        return 'Laptop color is required.';
+
+    const price = Number(l.sellingPrice);
+    if (l.sellingPrice === '' || l.sellingPrice == null ||
+        !Number.isFinite(price) || price <= 0)
+        return 'Selling price must be positive.';
+
+    if (typeof l.contactNumber !== 'string' ||
+        !/^[0-9]{10}$/.test(l.contactNumber))
+        return 'Contact number must contain exactly 10 digits.';
+
+    const negotiable = l.Negotiable ?? l.negotiable;
+    if (negotiable !== undefined && typeof negotiable !== 'boolean')
+        return 'Negotiable must be true or false.';
+
+    return null;
+}
+
+const getValues = l => [
+    l.sellerName.trim(), l.laptopBrand, l.laptopModel,
+    l.processorType, l.laptopRam, l.storageType,
+    l.laptopColor.trim(), Number(l.sellingPrice),
+    l.contactNumber, Boolean(l.Negotiable ?? l.negotiable)
+];
+
+const selectSQL = `SELECT id, seller_name AS sellerName,
+    laptop_brand AS laptopBrand, laptop_model AS laptopModel,
+    processor_type AS processorType, laptop_ram AS laptopRam,
+    storage_type AS storageType, laptop_color AS laptopColor,
+    selling_price AS sellingPrice, contact_number AS contactNumber,
+    negotiable AS negotiable FROM laptops`;
+
+app.get('/api/laptops', (req, res) => {
+    db.query(`${selectSQL} ORDER BY id DESC`, (err, rows) => {
+        if (err) return fail(res, 500, 'Failed to fetch laptops.');
+        res.json(rows);
+    });
+});
+
+app.post('/api/laptops', (req, res) => {
+    const error = validateLaptop(req.body);
+    if (error) return fail(res, 400, error);
+
+    const sql = `INSERT INTO laptops
+        (seller_name, laptop_brand, laptop_model, processor_type,
+         laptop_ram, storage_type, laptop_color, selling_price,
+         contact_number, negotiable)
+        VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`;
+
+    db.query(sql, getValues(req.body), (err, result) => {
+        if (err) {
+            console.error(err.message);
+            return fail(res, 500, 'Failed to add laptop.');
+        }
+        res.status(201).json({
+            message: 'Laptop listed successfully!',
+            id: result.insertId
+        });
+    });
+});
+
+app.put('/api/laptops/:id', (req, res) => {
+    const id = Number(req.params.id);
+    if (!Number.isSafeInteger(id) || id <= 0)
+        return fail(res, 400, 'Invalid laptop ID.');
+
+    const error = validateLaptop(req.body);
+    if (error) return fail(res, 400, error);
+
+    const sql = `UPDATE laptops SET seller_name=?, laptop_brand=?,
+        laptop_model=?, processor_type=?, laptop_ram=?, storage_type=?,
+        laptop_color=?, selling_price=?, contact_number=?, negotiable=?
+        WHERE id=?`;
+
+    db.query(sql, [...getValues(req.body), id], (err, result) => {
+        if (err) return fail(res, 500, 'Failed to update laptop.');
+        if (result.affectedRows)
+            return res.json({ message: 'Laptop updated successfully!' });
+
+        db.query('SELECT id FROM laptops WHERE id=?', [id], (err, rows) => {
+            if (err) return fail(res, 500, 'Failed to verify laptop.');
+            if (!rows.length) return fail(res, 404, 'Laptop not found.');
+            res.json({ message: 'Laptop details are already up to date.' });
+        });
+    });
+});
+
+app.delete('/api/laptops/:id', (req, res) => {
+    const id = Number(req.params.id);
+    if (!Number.isSafeInteger(id) || id <= 0)
+        return fail(res, 400, 'Invalid laptop ID.');
+
+    db.query('DELETE FROM laptops WHERE id=?', [id], (err, result) => {
+        if (err) return fail(res, 500, 'Failed to delete laptop.');
+        if (!result.affectedRows)
+            return fail(res, 404, 'Laptop not found.');
+        res.json({ message: 'Laptop 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')
+);