import React,{useState} from "react";
const Product=()=>{

const [obj,setObj]=useState({"id":444,"name":"prem","fee":50000.99});
const [products,setProducts]=useState(
[{"p_id":111,"p_name":"p_one","p_cost":10000,"company_name":"Lenovo"},
{"p_id":222,"p_name":"p_two","p_cost":20000,"company_name":"Dell"},
{"p_id":333,"p_name":"p_three","p_cost":30000,"company_name":"samsung"}]);
return(<>

<h1>{obj.id}</h1>
<h1>{obj.name}</h1>
<h1>{obj.fee}</h1>
<hr></hr>
<div>
<table border={1}
align="center"
cellPadding={10}
cellSpacing={10}>
<thead>
<tr>
<th>p_id</th>
<th>p_name</th>
<th>p_cost</th>
<th>company_name</th>
</tr>
</thead>
<tbody>
{
products.map((element,index)=>{
return(<tr key={index}>
<td>{element.p_id}</td>
<td>{element.p_name}</td>
<td>{element.p_cost}</td>
<td>{element.company_name}</td>
</tr>);
})
}
</tbody>
<tfoot></tfoot>
</table>
</div>



</>)
}
export default Product;

import React,{useState} from "react";
const Product=()=>{

const [obj,setObj]=useState({"id":444,"name":"prem","fee":50000.99});
const [products,setProducts]=useState(
[{"p_id":111,"p_name":"p_one","p_cost":10000,"company_name":"Lenovo"},
{"p_id":222,"p_name":"p_two","p_cost":20000,"company_name":"Dell"},
{"p_id":333,"p_name":"p_three","p_cost":30000,"company_name":"samsung"}]);
return(<>

<h1>{obj.id}</h1>
<h1>{obj.name}</h1>
<h1>{obj.fee}</h1>
<hr></hr>
<div>
<table border={1}
align="center"
cellPadding={10}
cellSpacing={10}>
<thead>
<tr>
<th>p_id</th>
<th>p_name</th>
<th>p_cost</th>
<th>company_name</th>
</tr>
</thead>
<tbody>
{
products.map((element,index)=>{
return(<tr key={index}>
<td>{element.p_id}</td>
<td>{element.p_name}</td>
<td>{element.p_cost}</td>
<td>{element.company_name}</td>
</tr>);
})
}
</tbody>
<tfoot></tfoot>
</table>
</div>



</>)
}
export default Product;

import React, { useRef, useState } from 'react';
import { useNavigate } from 'react-router-dom';

const validCredentials = {
username: 'user',
password: 'pass'
};

function Login() {
const usernameRef = useRef();
const passwordRef = useRef();
const [error, setError] = useState('');
const navigate = useNavigate();

const handleSubmit = (e) => {
e.preventDefault();

const username = usernameRef.current.value;
const password = passwordRef.current.value;

// Simple validation
if (username === validCredentials.username && password === validCredentials.password) {
navigate('/dashboard'); // Redirect to Dashboard
} else {
setError('Invalid credentials. Please try again.');
}
};

return (
<div>
<h1>Login</h1>
<form onSubmit={handleSubmit}>
<div>
<label>
Username:
<input type="text" ref={usernameRef} />
</label>
</div>
<div>
<label>
Password:
<input type="password" ref={passwordRef} />
</label>
</div>
<button type="submit">Login</button>
{error && <p style={{ color: 'red' }}>{error}</p>}
</form>
</div>
);
}

export default Login;

import axios from "axios";
import {useRef,useState} from "react";
const PostExp1=()=>{
const [res,setRes]=useState({});
const ref1=useRef(null);
const ref2=useRef(null);
const ref3=useRef(null);

const post_data=()=>{
postEx();
}
const postEx=async ()=>{
const res=await axios.post("http://localhost:9000/save",{"name":ref1.current.value,
"current_reading":ref2.current.value,
"previous_reading":ref3.current.value});
const {data}=res;
setRes(data);
}
return(
<>
Consumer Name: <input type="text" ref={ref1}></input> <br></br><br></br>
Current_Reading: <input type="text" ref={ref2}></input> <br></br><br></br>
Previous_Reading: <input type="text" ref={ref3}></input> <br></br><br></br>
<button onClick={post_data}>Post</button>
<p>{JSON.stringify(res)}</p>
</>
)
}
export default PostExp1;

import axios from "axios";
import { useRef,useState } from "react";

const [res,setRes] = useState({});
const ref1 = useRef(null);
const ref2 = useRef(null);
const ref3 = useRef(null);
const ref4 = useRef(null);
const update_data=()=>{
updateEx();
}
const updateEx = async ()=>{
const res = await axios.put(http://localhost:9000/update/${ref1.current.value},{
"name":ref2.current.value,
"current_reading":ref3.current.value,
"previous_reading":ref4.current.value,});
const {data} = res;
setRes(data);
}
return(<>
<div style={{textAlign:"center", border:"double", borderColor:"red", marginLeft:400, marginRight:400, marginTop:50}}>
Consumer Id : <input type="text" ref={ref1}></input><br></br><br></br>
Consumer Name : <input type="text" ref={ref2}></input><br></br><br></br>
Current Reading : <input type="text" ref={ref3}></input><br></br><br></br>
Previous Reading : <input type="text" ref={ref4}></input><br></br><br></br>
<button onClick={update_data}>update</button>
<p>{JSON.stringify(res)}</p>
</div>
</>)



}
export default UpdateEmployee;