Skip to content

Commit 019288f

Browse files
LadyKerrLadyKerr
committed
Add EmptyOverviewSection, AccommodationCard, and TransportationCard components; implement accommodation and transportation management features
1 parent a68d7cf commit 019288f

5 files changed

Lines changed: 391 additions & 4 deletions

File tree

‎planventure-api/instance/planventure.db‎

0 Bytes
Binary file not shown.

‎planventure-client/src/components/overview/AccommodationCard.jsx‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
import {
2+
Card,
3+
CardContent,
4+
Typography,
5+
Box,
6+
IconButton,
7+
Button,
8+
TextField,
9+
Stack,
10+
Collapse
11+
} from '@mui/material';
12+
import {
13+
Edit as EditIcon,
14+
Delete as DeleteIcon,
15+
Save as SaveIcon,
16+
Cancel as CancelIcon,
17+
Hotel as HotelIcon
18+
} from '@mui/icons-material';
19+
import { useState } from 'react';
20+
21+
const AccommodationCard = ({ accommodation, onUpdate, onDelete }) => {
22+
const [isEditing, setIsEditing] = useState(false);
23+
const [editedData, setEditedData] = useState(accommodation);
24+
25+
const handleSave = () => {
26+
onUpdate(editedData);
27+
setIsEditing(false);
28+
};
29+
30+
if (isEditing) {
31+
return (
32+
<Card variant="outlined" sx={{ mb: 2 }}>
33+
<CardContent>
34+
<Stack spacing={2}>
35+
<TextField
36+
fullWidth
37+
label="Name"
38+
value={editedData.name}
39+
onChange={(e) => setEditedData({ ...editedData, name: e.target.value })}
40+
/>
41+
<TextField
42+
fullWidth
43+
label="Address"
44+
value={editedData.address}
45+
onChange={(e) => setEditedData({ ...editedData, address: e.target.value })}
46+
/>
47+
<TextField
48+
fullWidth
49+
label="Check-in"
50+
type="datetime-local"
51+
value={editedData.checkIn}
52+
onChange={(e) => setEditedData({ ...editedData, checkIn: e.target.value })}
53+
InputLabelProps={{ shrink: true }}
54+
/>
55+
<TextField
56+
fullWidth
57+
label="Check-out"
58+
type="datetime-local"
59+
value={editedData.checkOut}
60+
onChange={(e) => setEditedData({ ...editedData, checkOut: e.target.value })}
61+
InputLabelProps={{ shrink: true }}
62+
/>
63+
<TextField
64+
fullWidth
65+
label="Booking Reference"
66+
value={editedData.bookingRef}
67+
onChange={(e) => setEditedData({ ...editedData, bookingRef: e.target.value })}
68+
/>
69+
<Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 1 }}>
70+
<Button startIcon={<CancelIcon />} onClick={() => setIsEditing(false)}>
71+
Cancel
72+
</Button>
73+
<Button startIcon={<SaveIcon />} variant="contained" onClick={handleSave}>
74+
Save
75+
</Button>
76+
</Box>
77+
</Stack>
78+
</CardContent>
79+
</Card>
80+
);
81+
}
82+
83+
return (
84+
<Card variant="outlined" sx={{ mb: 2 }}>
85+
<CardContent>
86+
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
87+
<Box>
88+
<Typography variant="h6" gutterBottom>
89+
{accommodation.name}
90+
</Typography>
91+
<Typography color="text.secondary" gutterBottom>
92+
{accommodation.address}
93+
</Typography>
94+
<Typography variant="body2" gutterBottom>
95+
Check-in: {new Date(accommodation.checkIn).toLocaleString()}
96+
</Typography>
97+
<Typography variant="body2" gutterBottom>
98+
Check-out: {new Date(accommodation.checkOut).toLocaleString()}
99+
</Typography>
100+
{accommodation.bookingRef && (
101+
<Typography variant="body2">
102+
Booking Reference: {accommodation.bookingRef}
103+
</Typography>
104+
)}
105+
</Box>
106+
<Box>
107+
<IconButton onClick={() => setIsEditing(true)}>
108+
<EditIcon />
109+
</IconButton>
110+
<IconButton onClick={() => onDelete(accommodation.id)} color="error">
111+
<DeleteIcon />
112+
</IconButton>
113+
</Box>
114+
</Box>
115+
</CardContent>
116+
</Card>
117+
);
118+
};
119+
120+
export default AccommodationCard;

‎planventure-client/src/components/overview/EmptyOverviewSection.jsx‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import {
2+
Box,
3+
Typography,
4+
Button,
5+
Paper
6+
} from '@mui/material';
7+
import { Add as AddIcon } from '@mui/icons-material';
8+
9+
const EmptyOverviewSection = ({ title, description, onAdd }) => {
10+
return (
11+
<Paper
12+
sx={{
13+
p: 3,
14+
textAlign: 'center',
15+
bgcolor: 'background.default',
16+
mb: 2
17+
}}
18+
>
19+
<Typography variant="h6" gutterBottom>
20+
No {title} Added Yet
21+
</Typography>
22+
<Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
23+
{description}
24+
</Typography>
25+
<Button
26+
variant="outlined"
27+
startIcon={<AddIcon />}
28+
onClick={onAdd}
29+
>
30+
Add {title}
31+
</Button>
32+
</Paper>
33+
);
34+
};
35+
36+
export default EmptyOverviewSection;

‎planventure-client/src/components/overview/TransportationCard.jsx‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
import {
2+
Card,
3+
CardContent,
4+
Typography,
5+
Box,
6+
IconButton,
7+
Button,
8+
TextField,
9+
Stack,
10+
MenuItem
11+
} from '@mui/material';
12+
import {
13+
Edit as EditIcon,
14+
Delete as DeleteIcon,
15+
Save as SaveIcon,
16+
Cancel as CancelIcon
17+
} from '@mui/icons-material';
18+
import { useState } from 'react';
19+
20+
const TransportationCard = ({ transport, onUpdate, onDelete }) => {
21+
const [isEditing, setIsEditing] = useState(false);
22+
const [editedData, setEditedData] = useState(transport);
23+
24+
const handleSave = () => {
25+
onUpdate(editedData);
26+
setIsEditing(false);
27+
};
28+
29+
if (isEditing) {
30+
return (
31+
<Card variant="outlined" sx={{ mb: 2 }}>
32+
<CardContent>
33+
<Stack spacing={2}>
34+
<TextField
35+
select
36+
fullWidth
37+
label="Type"
38+
value={editedData.type}
39+
onChange={(e) => setEditedData({ ...editedData, type: e.target.value })}
40+
>
41+
<MenuItem value="flight">Flight</MenuItem>
42+
<MenuItem value="train">Train</MenuItem>
43+
<MenuItem value="bus">Bus</MenuItem>
44+
<MenuItem value="car">Car Rental</MenuItem>
45+
</TextField>
46+
<TextField
47+
fullWidth
48+
label="From"
49+
value={editedData.from}
50+
onChange={(e) => setEditedData({ ...editedData, from: e.target.value })}
51+
/>
52+
<TextField
53+
fullWidth
54+
label="To"
55+
value={editedData.to}
56+
onChange={(e) => setEditedData({ ...editedData, to: e.target.value })}
57+
/>
58+
<TextField
59+
fullWidth
60+
label="Departure"
61+
type="datetime-local"
62+
value={editedData.departure}
63+
onChange={(e) => setEditedData({ ...editedData, departure: e.target.value })}
64+
InputLabelProps={{ shrink: true }}
65+
/>
66+
<TextField
67+
fullWidth
68+
label="Arrival"
69+
type="datetime-local"
70+
value={editedData.arrival}
71+
onChange={(e) => setEditedData({ ...editedData, arrival: e.target.value })}
72+
InputLabelProps={{ shrink: true }}
73+
/>
74+
<TextField
75+
fullWidth
76+
label="Booking Reference"
77+
value={editedData.bookingRef}
78+
onChange={(e) => setEditedData({ ...editedData, bookingRef: e.target.value })}
79+
/>
80+
<Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 1 }}>
81+
<Button startIcon={<CancelIcon />} onClick={() => setIsEditing(false)}>
82+
Cancel
83+
</Button>
84+
<Button startIcon={<SaveIcon />} variant="contained" onClick={handleSave}>
85+
Save
86+
</Button>
87+
</Box>
88+
</Stack>
89+
</CardContent>
90+
</Card>
91+
);
92+
}
93+
94+
return (
95+
<Card variant="outlined" sx={{ mb: 2 }}>
96+
<CardContent>
97+
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
98+
<Box>
99+
<Typography variant="h6" gutterBottom>
100+
{transport.type.charAt(0).toUpperCase() + transport.type.slice(1)}
101+
</Typography>
102+
<Typography color="text.secondary" gutterBottom>
103+
{transport.from} → {transport.to}
104+
</Typography>
105+
<Typography variant="body2" gutterBottom>
106+
Departure: {new Date(transport.departure).toLocaleString()}
107+
</Typography>
108+
<Typography variant="body2" gutterBottom>
109+
Arrival: {new Date(transport.arrival).toLocaleString()}
110+
</Typography>
111+
{transport.bookingRef && (
112+
<Typography variant="body2">
113+
Booking Reference: {transport.bookingRef}
114+
</Typography>
115+
)}
116+
</Box>
117+
<Box>
118+
<IconButton onClick={() => setIsEditing(true)}>
119+
<EditIcon />
120+
</IconButton>
121+
<IconButton onClick={() => onDelete(transport.id)} color="error">
122+
<DeleteIcon />
123+
</IconButton>
124+
</Box>
125+
</Box>
126+
</CardContent>
127+
</Card>
128+
);
129+
};
130+
131+
export default TransportationCard;

0 commit comments

Comments
 (0)