146 lines
8.3 KiB
Rust
146 lines
8.3 KiB
Rust
use yew::prelude::*;
|
|
use crate::routing::ViewContext;
|
|
use crate::components::ViewComponent;
|
|
|
|
#[derive(Properties, PartialEq)]
|
|
pub struct ResidenceViewProps {
|
|
pub context: ViewContext,
|
|
}
|
|
|
|
#[function_component(ResidenceView)]
|
|
pub fn residence_view(props: &ResidenceViewProps) -> Html {
|
|
html! {
|
|
<ViewComponent
|
|
title={Some("Personal Residence".to_string())}
|
|
description={Some("Manage your residence status and documentation".to_string())}
|
|
>
|
|
<div class="row">
|
|
<div class="col-lg-8">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">
|
|
<i class="bi bi-house-heart me-2"></i>
|
|
{"Residence Information"}
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<h6 class="text-muted">{"Personal Details"}</h6>
|
|
<table class="table table-borderless">
|
|
<tbody>
|
|
<tr>
|
|
<td class="fw-bold">{"Full Name:"}</td>
|
|
<td>{"Timur Gordon"}</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-bold">{"Residence ID:"}</td>
|
|
<td><code>{"RES-ZNZ-2024-042"}</code></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-bold">{"Residency Since:"}</td>
|
|
<td>{"March 10, 2024"}</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-bold">{"Nationality:"}</td>
|
|
<td>{"Digital Nomad"}</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-bold">{"Status:"}</td>
|
|
<td><span class="badge bg-success">{"Active Resident"}</span></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h6 class="text-muted">{"Residence Details"}</h6>
|
|
<table class="table table-borderless">
|
|
<tbody>
|
|
<tr>
|
|
<td class="fw-bold">{"Property:"}</td>
|
|
<td>{"Villa 42, Stone Town"}</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-bold">{"Address:"}</td>
|
|
<td>{"Malindi Road, Stone Town, Zanzibar"}</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-bold">{"Postal Code:"}</td>
|
|
<td>{"ZNZ-1001"}</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-bold">{"Phone:"}</td>
|
|
<td>{"+255 77 123 4567"}</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-bold">{"Email:"}</td>
|
|
<td>{"john.doe@resident.zdf"}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4">
|
|
// Residence Card (Vertical Mobile Wallet Style)
|
|
<div class="card shadow-lg border-0" style="background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); aspect-ratio: 3/4; max-width: 300px;">
|
|
<div class="card-body text-white p-4 d-flex flex-column h-100">
|
|
<div class="text-center mb-3">
|
|
<div class="bg-white bg-opacity-20 rounded-circle d-inline-flex align-items-center justify-content-center" style="width: 60px; height: 60px;">
|
|
<i class="bi bi-house-heart fs-3 text-white"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-center mb-3">
|
|
<h6 class="text-white-50 mb-1 text-uppercase" style="font-size: 0.7rem; letter-spacing: 1px;">{"Zanzibar Digital Freezone"}</h6>
|
|
<h5 class="fw-bold mb-0">{"Residence Permit"}</h5>
|
|
</div>
|
|
|
|
<div class="flex-grow-1">
|
|
<div class="mb-3">
|
|
<small class="text-white-50 text-uppercase" style="font-size: 0.65rem;">{"Resident Name"}</small>
|
|
<div class="fw-bold">{"Timur Gordon"}</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<small class="text-white-50 text-uppercase" style="font-size: 0.65rem;">{"Residence Number"}</small>
|
|
<div class="font-monospace fw-bold fs-5">{"RES-ZNZ-2024-042"}</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<small class="text-white-50 text-uppercase" style="font-size: 0.65rem;">{"Residency Date"}</small>
|
|
<div>{"March 10, 2024"}</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<small class="text-white-50 text-uppercase" style="font-size: 0.65rem;">{"Property"}</small>
|
|
<div>{"Villa 42, Stone Town"}</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<small class="text-white-50 text-uppercase" style="font-size: 0.65rem;">{"Status"}</small>
|
|
<div class="d-flex align-items-center">
|
|
<span class="badge text-dark me-2">{"Active"}</span>
|
|
<i class="bi bi-shield-check"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-auto pt-3 border-top border-white border-opacity-25">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<small class="text-white-50">{"Valid Until"}</small>
|
|
<small class="fw-bold">{"Mar 10, 2025"}</small>
|
|
</div>
|
|
<div class="text-center mt-2">
|
|
<small class="text-white-50">{"Digitally Verified"}</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ViewComponent>
|
|
}
|
|
} |