ios ui refactor
This commit is contained in:
Trey t
28
iosApp/iosApp/DELETE_THESE_FILES.txt
Normal file
28
iosApp/iosApp/DELETE_THESE_FILES.txt
Normal file
@@ -0,0 +1,28 @@
|
||||
PLEASE DELETE THE FOLLOWING FILES:
|
||||
|
||||
❌ AuthSubviews.swift
|
||||
❌ CommonSubviews.swift
|
||||
❌ ResidenceSubviews.swift
|
||||
❌ TaskSubviews.swift
|
||||
|
||||
These are old consolidated files. The new individual subview files are in the Subviews folder:
|
||||
|
||||
✅ Subviews/Common/ErrorView.swift
|
||||
✅ Subviews/Common/ErrorMessageView.swift
|
||||
✅ Subviews/Auth/LoginHeader.swift
|
||||
✅ Subviews/Auth/RegisterHeader.swift
|
||||
✅ Subviews/Residence/SummaryCard.swift
|
||||
✅ Subviews/Residence/SummaryStatView.swift
|
||||
✅ Subviews/Residence/ResidenceCard.swift
|
||||
✅ Subviews/Residence/TaskStatChip.swift
|
||||
✅ Subviews/Residence/EmptyResidencesView.swift
|
||||
✅ Subviews/Residence/PropertyHeaderCard.swift
|
||||
✅ Subviews/Residence/PropertyDetailItem.swift
|
||||
✅ Subviews/Task/TaskPill.swift
|
||||
✅ Subviews/Task/StatusBadge.swift
|
||||
✅ Subviews/Task/PriorityBadge.swift
|
||||
✅ Subviews/Task/EmptyTasksView.swift
|
||||
✅ Subviews/Task/TaskCard.swift
|
||||
✅ Subviews/Task/TasksSection.swift
|
||||
|
||||
Each file contains only ONE view component with its own preview.
|
||||
@@ -19,19 +19,7 @@ struct LoginView: View {
|
||||
ScrollView {
|
||||
VStack(spacing: 24) {
|
||||
// Logo or App Name
|
||||
VStack(spacing: 8) {
|
||||
Image(systemName: "house.fill")
|
||||
.resizable()
|
||||
.aspectRatio(contentMode: .fit)
|
||||
.frame(width: 80, height: 80)
|
||||
.foregroundColor(.blue)
|
||||
|
||||
Text("MyCrib")
|
||||
.font(.largeTitle)
|
||||
.fontWeight(.bold)
|
||||
}
|
||||
.padding(.top, 60)
|
||||
.padding(.bottom, 20)
|
||||
LoginHeader()
|
||||
|
||||
// Login Form
|
||||
VStack(spacing: 16) {
|
||||
@@ -69,24 +57,7 @@ struct LoginView: View {
|
||||
|
||||
// Error Message
|
||||
if let errorMessage = viewModel.errorMessage {
|
||||
HStack {
|
||||
Image(systemName: "exclamationmark.triangle.fill")
|
||||
.foregroundColor(.red)
|
||||
|
||||
Text(errorMessage)
|
||||
.font(.caption)
|
||||
.foregroundColor(.red)
|
||||
|
||||
Spacer()
|
||||
|
||||
Button(action: viewModel.clearError) {
|
||||
Image(systemName: "xmark.circle.fill")
|
||||
.foregroundColor(.red)
|
||||
}
|
||||
}
|
||||
.padding()
|
||||
.background(Color.red.opacity(0.1))
|
||||
.cornerRadius(8)
|
||||
ErrorMessageView(message: errorMessage, onDismiss: viewModel.clearError)
|
||||
}
|
||||
|
||||
// Login Button
|
||||
|
||||
@@ -18,23 +18,7 @@ struct RegisterView: View {
|
||||
ScrollView {
|
||||
VStack(spacing: 24) {
|
||||
// Icon and Title
|
||||
VStack(spacing: 12) {
|
||||
Image(systemName: "person.badge.plus")
|
||||
.resizable()
|
||||
.aspectRatio(contentMode: .fit)
|
||||
.frame(width: 64, height: 64)
|
||||
.foregroundColor(.blue)
|
||||
|
||||
Text("Join MyCrib")
|
||||
.font(.largeTitle)
|
||||
.fontWeight(.bold)
|
||||
|
||||
Text("Start managing your properties today")
|
||||
.font(.subheadline)
|
||||
.foregroundColor(.secondary)
|
||||
}
|
||||
.padding(.top, 40)
|
||||
.padding(.bottom, 20)
|
||||
RegisterHeader()
|
||||
|
||||
// Registration Form
|
||||
VStack(spacing: 16) {
|
||||
@@ -105,24 +89,7 @@ struct RegisterView: View {
|
||||
|
||||
// Error Message
|
||||
if let errorMessage = viewModel.errorMessage {
|
||||
HStack {
|
||||
Image(systemName: "exclamationmark.triangle.fill")
|
||||
.foregroundColor(.red)
|
||||
|
||||
Text(errorMessage)
|
||||
.font(.caption)
|
||||
.foregroundColor(.red)
|
||||
|
||||
Spacer()
|
||||
|
||||
Button(action: viewModel.clearError) {
|
||||
Image(systemName: "xmark.circle.fill")
|
||||
.foregroundColor(.red)
|
||||
}
|
||||
}
|
||||
.padding()
|
||||
.background(Color.red.opacity(0.1))
|
||||
.cornerRadius(8)
|
||||
ErrorMessageView(message: errorMessage, onDismiss: viewModel.clearError)
|
||||
}
|
||||
|
||||
// Register Button
|
||||
|
||||
@@ -147,377 +147,6 @@ struct ResidenceDetailView: View {
|
||||
}
|
||||
}
|
||||
|
||||
struct PropertyHeaderCard: View {
|
||||
let residence: Residence
|
||||
|
||||
var body: some View {
|
||||
VStack(alignment: .leading, spacing: 16) {
|
||||
HStack {
|
||||
Image(systemName: "house.fill")
|
||||
.font(.title2)
|
||||
.foregroundColor(.blue)
|
||||
|
||||
VStack(alignment: .leading, spacing: 4) {
|
||||
Text(residence.name)
|
||||
.font(.title2)
|
||||
.fontWeight(.bold)
|
||||
|
||||
Text(residence.propertyType)
|
||||
.font(.caption)
|
||||
.foregroundColor(.secondary)
|
||||
}
|
||||
|
||||
Spacer()
|
||||
}
|
||||
|
||||
Divider()
|
||||
|
||||
// Address
|
||||
VStack(alignment: .leading, spacing: 4) {
|
||||
Label(residence.streetAddress, systemImage: "mappin.circle.fill")
|
||||
.font(.subheadline)
|
||||
|
||||
Text("\(residence.city), \(residence.stateProvince) \(residence.postalCode)")
|
||||
.font(.subheadline)
|
||||
.foregroundColor(.secondary)
|
||||
|
||||
if !residence.country.isEmpty {
|
||||
Text(residence.country)
|
||||
.font(.caption)
|
||||
.foregroundColor(.secondary)
|
||||
}
|
||||
}
|
||||
|
||||
// Property Details
|
||||
if let bedrooms = residence.bedrooms,
|
||||
let bathrooms = residence.bathrooms {
|
||||
Divider()
|
||||
|
||||
HStack(spacing: 24) {
|
||||
PropertyDetailItem(icon: "bed.double.fill", value: "\(bedrooms)", label: "Beds")
|
||||
PropertyDetailItem(icon: "shower.fill", value: String(format: "%.1f", bathrooms), label: "Baths")
|
||||
|
||||
if let sqft = residence.squareFootage {
|
||||
PropertyDetailItem(icon: "square.fill", value: "\(sqft)", label: "Sq Ft")
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.padding(20)
|
||||
.background(Color.blue.opacity(0.1))
|
||||
.cornerRadius(16)
|
||||
}
|
||||
}
|
||||
|
||||
struct PropertyDetailItem: View {
|
||||
let icon: String
|
||||
let value: String
|
||||
let label: String
|
||||
|
||||
var body: some View {
|
||||
VStack(spacing: 4) {
|
||||
Image(systemName: icon)
|
||||
.font(.caption)
|
||||
.foregroundColor(.blue)
|
||||
|
||||
Text(value)
|
||||
.font(.subheadline)
|
||||
.fontWeight(.semibold)
|
||||
|
||||
Text(label)
|
||||
.font(.caption2)
|
||||
.foregroundColor(.secondary)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
struct TasksSection: View {
|
||||
let tasksResponse: TasksByResidenceResponse
|
||||
@Binding var showCancelledTasks: Bool
|
||||
let onEditTask: (TaskDetail) -> Void
|
||||
let onCancelTask: (TaskDetail) -> Void
|
||||
let onUncancelTask: (TaskDetail) -> Void
|
||||
|
||||
var body: some View {
|
||||
VStack(alignment: .leading, spacing: 12) {
|
||||
HStack {
|
||||
Text("Tasks")
|
||||
.font(.title2)
|
||||
.fontWeight(.bold)
|
||||
|
||||
Spacer()
|
||||
|
||||
// Task Summary Pills
|
||||
HStack(spacing: 8) {
|
||||
TaskPill(count: tasksResponse.summary.total, label: "Total", color: .blue)
|
||||
TaskPill(count: tasksResponse.summary.pending, label: "Pending", color: .orange)
|
||||
TaskPill(count: tasksResponse.summary.completed, label: "Done", color: .green)
|
||||
}
|
||||
}
|
||||
|
||||
// Active Tasks
|
||||
if tasksResponse.tasks.isEmpty && tasksResponse.cancelledTasks.isEmpty {
|
||||
EmptyTasksView()
|
||||
} else {
|
||||
ForEach(tasksResponse.tasks, id: \.id) { task in
|
||||
TaskCard(
|
||||
task: task,
|
||||
onEdit: { onEditTask(task) },
|
||||
onCancel: { onCancelTask(task) },
|
||||
onUncancel: nil
|
||||
)
|
||||
}
|
||||
|
||||
// Cancelled Tasks Section
|
||||
if !tasksResponse.cancelledTasks.isEmpty {
|
||||
VStack(alignment: .leading, spacing: 12) {
|
||||
HStack {
|
||||
Label("Cancelled Tasks (\(tasksResponse.cancelledTasks.count))", systemImage: "xmark.circle")
|
||||
.font(.headline)
|
||||
.foregroundColor(.red)
|
||||
|
||||
Spacer()
|
||||
|
||||
Button(showCancelledTasks ? "Hide" : "Show") {
|
||||
showCancelledTasks.toggle()
|
||||
}
|
||||
.font(.subheadline)
|
||||
}
|
||||
.padding(.top, 8)
|
||||
|
||||
if showCancelledTasks {
|
||||
ForEach(tasksResponse.cancelledTasks, id: \.id) { task in
|
||||
TaskCard(
|
||||
task: task,
|
||||
onEdit: { onEditTask(task) },
|
||||
onCancel: nil,
|
||||
onUncancel: { onUncancelTask(task) }
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
struct TaskPill: View {
|
||||
let count: Int32
|
||||
let label: String
|
||||
let color: Color
|
||||
|
||||
var body: some View {
|
||||
HStack(spacing: 4) {
|
||||
Text("\(count)")
|
||||
.font(.caption)
|
||||
.fontWeight(.bold)
|
||||
|
||||
Text(label)
|
||||
.font(.caption2)
|
||||
}
|
||||
.padding(.horizontal, 8)
|
||||
.padding(.vertical, 4)
|
||||
.background(color.opacity(0.2))
|
||||
.foregroundColor(color)
|
||||
.cornerRadius(8)
|
||||
}
|
||||
}
|
||||
|
||||
struct TaskCard: View {
|
||||
let task: TaskDetail
|
||||
let onEdit: () -> Void
|
||||
let onCancel: (() -> Void)?
|
||||
let onUncancel: (() -> Void)?
|
||||
|
||||
var body: some View {
|
||||
VStack(alignment: .leading, spacing: 12) {
|
||||
HStack {
|
||||
VStack(alignment: .leading, spacing: 4) {
|
||||
Text(task.title)
|
||||
.font(.headline)
|
||||
.foregroundColor(.primary)
|
||||
|
||||
if let status = task.status {
|
||||
StatusBadge(status: status.name)
|
||||
}
|
||||
}
|
||||
|
||||
Spacer()
|
||||
|
||||
PriorityBadge(priority: task.priority.name)
|
||||
}
|
||||
|
||||
if let description = task.description_, !description.isEmpty {
|
||||
Text(description)
|
||||
.font(.subheadline)
|
||||
.foregroundColor(.secondary)
|
||||
.lineLimit(2)
|
||||
}
|
||||
|
||||
HStack {
|
||||
Label(task.frequency.displayName, systemImage: "repeat")
|
||||
.font(.caption)
|
||||
.foregroundColor(.secondary)
|
||||
|
||||
Spacer()
|
||||
|
||||
Label(formatDate(task.dueDate), systemImage: "calendar")
|
||||
.font(.caption)
|
||||
.foregroundColor(.secondary)
|
||||
}
|
||||
|
||||
// Completion count
|
||||
if task.completions.count > 0 {
|
||||
Divider()
|
||||
|
||||
HStack {
|
||||
Image(systemName: "checkmark.circle")
|
||||
.foregroundColor(.green)
|
||||
Text("Completed \(task.completions.count) time\(task.completions.count == 1 ? "" : "s")")
|
||||
.font(.caption)
|
||||
.foregroundColor(.secondary)
|
||||
}
|
||||
}
|
||||
|
||||
if task.showCompletedButton {
|
||||
Button(action: {}) {
|
||||
HStack {
|
||||
Image(systemName: "checkmark.circle.fill")
|
||||
.resizable()
|
||||
.frame(width: 20, height: 20)
|
||||
Text("Complete Task")
|
||||
.font(.title3.weight(.semibold))
|
||||
}
|
||||
.frame(maxWidth: .infinity)
|
||||
}
|
||||
.buttonStyle(.borderedProminent)
|
||||
.cornerRadius(12)
|
||||
}
|
||||
|
||||
// Action Buttons
|
||||
HStack(spacing: 8) {
|
||||
Button(action: onEdit) {
|
||||
Label("Edit", systemImage: "pencil")
|
||||
.font(.subheadline)
|
||||
.frame(maxWidth: .infinity)
|
||||
}
|
||||
.buttonStyle(.bordered)
|
||||
|
||||
if let onCancel = onCancel {
|
||||
Button(action: onCancel) {
|
||||
Label("Cancel", systemImage: "xmark.circle")
|
||||
.font(.subheadline)
|
||||
.frame(maxWidth: .infinity)
|
||||
}
|
||||
.buttonStyle(.bordered)
|
||||
.tint(.red)
|
||||
} else if let onUncancel = onUncancel {
|
||||
Button(action: onUncancel) {
|
||||
Label("Restore", systemImage: "arrow.uturn.backward")
|
||||
.font(.subheadline)
|
||||
.frame(maxWidth: .infinity)
|
||||
}
|
||||
.buttonStyle(.borderedProminent)
|
||||
.tint(.blue)
|
||||
}
|
||||
}
|
||||
}
|
||||
.padding(16)
|
||||
.background(Color(.systemBackground))
|
||||
.cornerRadius(12)
|
||||
.shadow(color: Color.black.opacity(0.05), radius: 3, x: 0, y: 2)
|
||||
}
|
||||
|
||||
private func formatDate(_ dateString: String) -> String {
|
||||
let formatter = DateFormatter()
|
||||
formatter.dateFormat = "yyyy-MM-dd"
|
||||
if let date = formatter.date(from: dateString) {
|
||||
formatter.dateStyle = .medium
|
||||
return formatter.string(from: date)
|
||||
}
|
||||
return dateString
|
||||
}
|
||||
}
|
||||
|
||||
struct StatusBadge: View {
|
||||
let status: String
|
||||
|
||||
var body: some View {
|
||||
Text(formatStatus(status))
|
||||
.font(.caption)
|
||||
.padding(.horizontal, 8)
|
||||
.padding(.vertical, 4)
|
||||
.background(statusColor.opacity(0.2))
|
||||
.foregroundColor(statusColor)
|
||||
.cornerRadius(6)
|
||||
}
|
||||
|
||||
private func formatStatus(_ status: String) -> String {
|
||||
switch status {
|
||||
case "in_progress": return "In Progress"
|
||||
default: return status.capitalized
|
||||
}
|
||||
}
|
||||
|
||||
private var statusColor: Color {
|
||||
switch status {
|
||||
case "completed": return .green
|
||||
case "in_progress": return .blue
|
||||
case "pending": return .orange
|
||||
case "cancelled": return .red
|
||||
default: return .gray
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
struct PriorityBadge: View {
|
||||
let priority: String
|
||||
|
||||
var body: some View {
|
||||
HStack(spacing: 4) {
|
||||
Image(systemName: "exclamationmark.circle.fill")
|
||||
.font(.caption2)
|
||||
|
||||
Text(priority.capitalized)
|
||||
.font(.caption)
|
||||
.fontWeight(.medium)
|
||||
}
|
||||
.padding(.horizontal, 8)
|
||||
.padding(.vertical, 4)
|
||||
.background(priorityColor.opacity(0.2))
|
||||
.foregroundColor(priorityColor)
|
||||
.cornerRadius(6)
|
||||
}
|
||||
|
||||
private var priorityColor: Color {
|
||||
switch priority.lowercased() {
|
||||
case "high": return .red
|
||||
case "medium": return .orange
|
||||
case "low": return .green
|
||||
default: return .gray
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
struct EmptyTasksView: View {
|
||||
var body: some View {
|
||||
VStack(spacing: 12) {
|
||||
Image(systemName: "checkmark.circle")
|
||||
.font(.system(size: 48))
|
||||
.foregroundColor(.gray.opacity(0.5))
|
||||
|
||||
Text("No tasks yet")
|
||||
.font(.subheadline)
|
||||
.foregroundColor(.secondary)
|
||||
}
|
||||
.frame(maxWidth: .infinity)
|
||||
.padding(32)
|
||||
.background(Color(.systemBackground))
|
||||
.cornerRadius(12)
|
||||
}
|
||||
}
|
||||
|
||||
#Preview {
|
||||
NavigationView {
|
||||
ResidenceDetailView(residenceId: 1)
|
||||
|
||||
@@ -71,203 +71,6 @@ struct ResidencesListView: View {
|
||||
}
|
||||
}
|
||||
|
||||
struct SummaryCard: View {
|
||||
let summary: MyResidencesSummary
|
||||
|
||||
var body: some View {
|
||||
VStack(spacing: 16) {
|
||||
HStack {
|
||||
Image(systemName: "chart.bar.doc.horizontal")
|
||||
.font(.title3)
|
||||
Text("Overview")
|
||||
.font(.title3)
|
||||
.fontWeight(.bold)
|
||||
Spacer()
|
||||
}
|
||||
|
||||
HStack(spacing: 20) {
|
||||
SummaryStatView(
|
||||
icon: "house.fill",
|
||||
value: "\(summary.totalResidences)",
|
||||
label: "Properties"
|
||||
)
|
||||
|
||||
SummaryStatView(
|
||||
icon: "list.bullet",
|
||||
value: "\(summary.totalTasks)",
|
||||
label: "Total Tasks"
|
||||
)
|
||||
}
|
||||
|
||||
Divider()
|
||||
|
||||
HStack(spacing: 20) {
|
||||
SummaryStatView(
|
||||
icon: "calendar",
|
||||
value: "\(summary.tasksDueNextWeek)",
|
||||
label: "Due This Week"
|
||||
)
|
||||
|
||||
SummaryStatView(
|
||||
icon: "calendar.badge.clock",
|
||||
value: "\(summary.tasksDueNextMonth)",
|
||||
label: "Due This Month"
|
||||
)
|
||||
}
|
||||
}
|
||||
.padding(20)
|
||||
.background(Color.blue.opacity(0.1))
|
||||
.cornerRadius(16)
|
||||
}
|
||||
}
|
||||
|
||||
struct SummaryStatView: View {
|
||||
let icon: String
|
||||
let value: String
|
||||
let label: String
|
||||
|
||||
var body: some View {
|
||||
VStack(spacing: 8) {
|
||||
Image(systemName: icon)
|
||||
.font(.title3)
|
||||
.foregroundColor(.blue)
|
||||
|
||||
Text(value)
|
||||
.font(.title2)
|
||||
.fontWeight(.bold)
|
||||
|
||||
Text(label)
|
||||
.font(.caption)
|
||||
.foregroundColor(.secondary)
|
||||
.multilineTextAlignment(.center)
|
||||
}
|
||||
.frame(maxWidth: .infinity)
|
||||
}
|
||||
}
|
||||
|
||||
struct ResidenceCard: View {
|
||||
let residence: ResidenceWithTasks
|
||||
|
||||
var body: some View {
|
||||
VStack(alignment: .leading, spacing: 12) {
|
||||
// Property Name and Address
|
||||
VStack(alignment: .leading, spacing: 4) {
|
||||
Text(residence.name)
|
||||
.font(.title3)
|
||||
.fontWeight(.bold)
|
||||
.foregroundColor(.primary)
|
||||
|
||||
Text(residence.streetAddress)
|
||||
.font(.subheadline)
|
||||
.foregroundColor(.secondary)
|
||||
|
||||
Text("\(residence.city), \(residence.stateProvince)")
|
||||
.font(.subheadline)
|
||||
.foregroundColor(.secondary)
|
||||
}
|
||||
|
||||
Divider()
|
||||
|
||||
// Task Stats
|
||||
HStack(spacing: 24) {
|
||||
TaskStatChip(
|
||||
icon: "list.bullet",
|
||||
value: "\(residence.taskSummary.total)",
|
||||
label: "Tasks",
|
||||
color: .blue
|
||||
)
|
||||
|
||||
TaskStatChip(
|
||||
icon: "checkmark.circle.fill",
|
||||
value: "\(residence.taskSummary.completed)",
|
||||
label: "Done",
|
||||
color: .green
|
||||
)
|
||||
|
||||
TaskStatChip(
|
||||
icon: "clock.fill",
|
||||
value: "\(residence.taskSummary.pending)",
|
||||
label: "Pending",
|
||||
color: .orange
|
||||
)
|
||||
}
|
||||
}
|
||||
.padding(20)
|
||||
.background(Color(.systemBackground))
|
||||
.cornerRadius(12)
|
||||
.shadow(color: Color.black.opacity(0.05), radius: 5, x: 0, y: 2)
|
||||
}
|
||||
}
|
||||
|
||||
struct TaskStatChip: View {
|
||||
let icon: String
|
||||
let value: String
|
||||
let label: String
|
||||
let color: Color
|
||||
|
||||
var body: some View {
|
||||
HStack(spacing: 4) {
|
||||
Image(systemName: icon)
|
||||
.font(.caption)
|
||||
.foregroundColor(color)
|
||||
|
||||
Text(value)
|
||||
.font(.subheadline)
|
||||
.fontWeight(.bold)
|
||||
.foregroundColor(color)
|
||||
|
||||
Text(label)
|
||||
.font(.caption)
|
||||
.foregroundColor(.secondary)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
struct EmptyResidencesView: View {
|
||||
var body: some View {
|
||||
VStack(spacing: 16) {
|
||||
Image(systemName: "house")
|
||||
.font(.system(size: 80))
|
||||
.foregroundColor(.blue.opacity(0.6))
|
||||
|
||||
Text("No properties yet")
|
||||
.font(.title2)
|
||||
.fontWeight(.semibold)
|
||||
|
||||
Text("Add your first property to get started!")
|
||||
.font(.body)
|
||||
.foregroundColor(.secondary)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
struct ErrorView: View {
|
||||
let message: String
|
||||
let retryAction: () -> Void
|
||||
|
||||
var body: some View {
|
||||
VStack(spacing: 16) {
|
||||
Image(systemName: "exclamationmark.triangle")
|
||||
.font(.system(size: 64))
|
||||
.foregroundColor(.red)
|
||||
|
||||
Text("Error: \(message)")
|
||||
.foregroundColor(.red)
|
||||
.multilineTextAlignment(.center)
|
||||
|
||||
Button(action: retryAction) {
|
||||
Text("Retry")
|
||||
.padding(.horizontal, 32)
|
||||
.padding(.vertical, 12)
|
||||
.background(Color.blue)
|
||||
.foregroundColor(.white)
|
||||
.cornerRadius(8)
|
||||
}
|
||||
}
|
||||
.padding()
|
||||
}
|
||||
}
|
||||
|
||||
#Preview {
|
||||
NavigationView {
|
||||
ResidencesListView()
|
||||
|
||||
48
iosApp/iosApp/SETUP_INSTRUCTIONS.md
Normal file
48
iosApp/iosApp/SETUP_INSTRUCTIONS.md
Normal file
@@ -0,0 +1,48 @@
|
||||
# iOS Project Setup Instructions
|
||||
|
||||
## Adding New Subview Files to Xcode
|
||||
|
||||
Four new Swift files containing reusable subviews have been created but need to be added to the Xcode project:
|
||||
|
||||
1. `CommonSubviews.swift` - Error views
|
||||
2. `AuthSubviews.swift` - Login/Register headers
|
||||
3. `ResidenceSubviews.swift` - Property-related views
|
||||
4. `TaskSubviews.swift` - Task-related views
|
||||
|
||||
### Steps to Add Files (30 seconds):
|
||||
|
||||
1. Open `iosApp.xcodeproj` in Xcode
|
||||
2. Right-click on the `iosApp` folder in the Project Navigator
|
||||
3. Select **"Add Files to 'iosApp'..."**
|
||||
4. Navigate to the `iosApp/iosApp/` directory
|
||||
5. Select all 4 `*Subviews.swift` files:
|
||||
- `AuthSubviews.swift`
|
||||
- `CommonSubviews.swift`
|
||||
- `ResidenceSubviews.swift`
|
||||
- `TaskSubviews.swift`
|
||||
6. Make sure **"Copy items if needed"** is UNchecked (files are already in the project)
|
||||
7. Make sure **"Add to targets: iosApp"** is checked
|
||||
8. Click **"Add"**
|
||||
|
||||
### Verify
|
||||
|
||||
Build the project (Cmd+B). All errors should be resolved.
|
||||
|
||||
### File Locations
|
||||
|
||||
All files are located in: `/Users/treyt/Desktop/code/myCrib/MyCribKMM/iosApp/iosApp/`
|
||||
|
||||
```
|
||||
iosApp/
|
||||
└── iosApp/
|
||||
├── AuthSubviews.swift ← Add this
|
||||
├── CommonSubviews.swift ← Add this
|
||||
├── ResidenceSubviews.swift ← Add this
|
||||
├── TaskSubviews.swift ← Add this
|
||||
├── Login/
|
||||
├── Register/
|
||||
├── Residence/
|
||||
└── Task/
|
||||
```
|
||||
|
||||
That's it! The project should now compile without errors.
|
||||
23
iosApp/iosApp/Subviews/Auth/LoginHeader.swift
Normal file
23
iosApp/iosApp/Subviews/Auth/LoginHeader.swift
Normal file
@@ -0,0 +1,23 @@
|
||||
import SwiftUI
|
||||
|
||||
struct LoginHeader: View {
|
||||
var body: some View {
|
||||
VStack(spacing: 8) {
|
||||
Image(systemName: "house.fill")
|
||||
.resizable()
|
||||
.aspectRatio(contentMode: .fit)
|
||||
.frame(width: 80, height: 80)
|
||||
.foregroundColor(.blue)
|
||||
|
||||
Text("MyCrib")
|
||||
.font(.largeTitle)
|
||||
.fontWeight(.bold)
|
||||
}
|
||||
.padding(.top, 60)
|
||||
.padding(.bottom, 20)
|
||||
}
|
||||
}
|
||||
|
||||
#Preview {
|
||||
LoginHeader()
|
||||
}
|
||||
27
iosApp/iosApp/Subviews/Auth/RegisterHeader.swift
Normal file
27
iosApp/iosApp/Subviews/Auth/RegisterHeader.swift
Normal file
@@ -0,0 +1,27 @@
|
||||
import SwiftUI
|
||||
|
||||
struct RegisterHeader: View {
|
||||
var body: some View {
|
||||
VStack(spacing: 12) {
|
||||
Image(systemName: "person.badge.plus")
|
||||
.resizable()
|
||||
.aspectRatio(contentMode: .fit)
|
||||
.frame(width: 64, height: 64)
|
||||
.foregroundColor(.blue)
|
||||
|
||||
Text("Join MyCrib")
|
||||
.font(.largeTitle)
|
||||
.fontWeight(.bold)
|
||||
|
||||
Text("Start managing your properties today")
|
||||
.font(.subheadline)
|
||||
.foregroundColor(.secondary)
|
||||
}
|
||||
.padding(.top, 40)
|
||||
.padding(.bottom, 20)
|
||||
}
|
||||
}
|
||||
|
||||
#Preview {
|
||||
RegisterHeader()
|
||||
}
|
||||
38
iosApp/iosApp/Subviews/Common/ErrorMessageView.swift
Normal file
38
iosApp/iosApp/Subviews/Common/ErrorMessageView.swift
Normal file
@@ -0,0 +1,38 @@
|
||||
import SwiftUI
|
||||
|
||||
struct ErrorMessageView: View {
|
||||
let message: String
|
||||
let onDismiss: () -> Void
|
||||
|
||||
var body: some View {
|
||||
HStack {
|
||||
Image(systemName: "exclamationmark.triangle.fill")
|
||||
.foregroundColor(.red)
|
||||
|
||||
Text(message)
|
||||
.font(.caption)
|
||||
.foregroundColor(.red)
|
||||
|
||||
Spacer()
|
||||
|
||||
Button(action: onDismiss) {
|
||||
Image(systemName: "xmark.circle.fill")
|
||||
.foregroundColor(.red)
|
||||
}
|
||||
}
|
||||
.padding()
|
||||
.background(Color.red.opacity(0.1))
|
||||
.cornerRadius(8)
|
||||
}
|
||||
}
|
||||
|
||||
#Preview {
|
||||
VStack {
|
||||
ErrorMessageView(message: "Invalid username or password") {
|
||||
print("Dismissed")
|
||||
}
|
||||
.padding()
|
||||
|
||||
Spacer()
|
||||
}
|
||||
}
|
||||
34
iosApp/iosApp/Subviews/Common/ErrorView.swift
Normal file
34
iosApp/iosApp/Subviews/Common/ErrorView.swift
Normal file
@@ -0,0 +1,34 @@
|
||||
import SwiftUI
|
||||
|
||||
struct ErrorView: View {
|
||||
let message: String
|
||||
let retryAction: () -> Void
|
||||
|
||||
var body: some View {
|
||||
VStack(spacing: 16) {
|
||||
Image(systemName: "exclamationmark.triangle")
|
||||
.font(.system(size: 64))
|
||||
.foregroundColor(.red)
|
||||
|
||||
Text("Error: \(message)")
|
||||
.foregroundColor(.red)
|
||||
.multilineTextAlignment(.center)
|
||||
|
||||
Button(action: retryAction) {
|
||||
Text("Retry")
|
||||
.padding(.horizontal, 32)
|
||||
.padding(.vertical, 12)
|
||||
.background(Color.blue)
|
||||
.foregroundColor(.white)
|
||||
.cornerRadius(8)
|
||||
}
|
||||
}
|
||||
.padding()
|
||||
}
|
||||
}
|
||||
|
||||
#Preview {
|
||||
ErrorView(message: "Failed to load data") {
|
||||
print("Retry tapped")
|
||||
}
|
||||
}
|
||||
97
iosApp/iosApp/Subviews/README.md
Normal file
97
iosApp/iosApp/Subviews/README.md
Normal file
@@ -0,0 +1,97 @@
|
||||
# iOS Subviews
|
||||
|
||||
This folder contains all reusable SwiftUI view components, organized by feature area. Each file contains **exactly one view** with its own preview.
|
||||
|
||||
## 📁 Folder Structure
|
||||
|
||||
```
|
||||
Subviews/
|
||||
├── Common/ (Shared UI components)
|
||||
├── Auth/ (Login/Register components)
|
||||
├── Residence/ (Property-related components)
|
||||
└── Task/ (Task-related components)
|
||||
```
|
||||
|
||||
## 📋 Component List
|
||||
|
||||
### Common (2 components)
|
||||
- **ErrorView.swift** - Full-screen error display with retry button
|
||||
- **ErrorMessageView.swift** - Inline error message with dismiss button
|
||||
|
||||
### Auth (2 components)
|
||||
- **LoginHeader.swift** - App logo and title for login screen
|
||||
- **RegisterHeader.swift** - Icon and welcome text for registration
|
||||
|
||||
### Residence (7 components)
|
||||
- **SummaryCard.swift** - Overview card with property/task statistics
|
||||
- **SummaryStatView.swift** - Individual stat display (icon, value, label)
|
||||
- **ResidenceCard.swift** - Property card with address and task summary
|
||||
- **TaskStatChip.swift** - Small chip showing task count by status
|
||||
- **EmptyResidencesView.swift** - Empty state for no properties
|
||||
- **PropertyHeaderCard.swift** - Detailed property header with address
|
||||
- **PropertyDetailItem.swift** - Small property detail (beds, baths, sqft)
|
||||
|
||||
### Task (6 components)
|
||||
- **TaskPill.swift** - Small colored pill showing task counts
|
||||
- **StatusBadge.swift** - Task status badge (pending, in progress, etc.)
|
||||
- **PriorityBadge.swift** - Task priority badge (high, medium, low)
|
||||
- **EmptyTasksView.swift** - Empty state for no tasks
|
||||
- **TaskCard.swift** - Full task card with all details and actions
|
||||
- **TasksSection.swift** - Complete tasks section with cancelled tasks
|
||||
|
||||
## 🎨 Preview Support
|
||||
|
||||
Every component includes a `#Preview` for easy testing in Xcode Canvas.
|
||||
|
||||
## ✅ Adding to Xcode Project
|
||||
|
||||
**IMPORTANT**: These files need to be added to the Xcode project to compile.
|
||||
|
||||
### Steps:
|
||||
1. Open `iosApp.xcodeproj` in Xcode
|
||||
2. Right-click the `iosApp` folder in Project Navigator
|
||||
3. Select **"Add Files to 'iosApp'..."**
|
||||
4. Navigate to and select the entire **`Subviews`** folder
|
||||
5. Make sure:
|
||||
- ✅ "Create groups" is selected (NOT "Create folder references")
|
||||
- ✅ "Add to targets: iosApp" is checked
|
||||
- ❌ "Copy items if needed" is UNchecked
|
||||
6. Click **"Add"**
|
||||
|
||||
### Verify
|
||||
Build the project (⌘+B). All 17 subview files should compile successfully.
|
||||
|
||||
## 🗑️ Old Files to Delete
|
||||
|
||||
Delete these consolidated files from the root `iosApp` directory:
|
||||
- ❌ `AuthSubviews.swift`
|
||||
- ❌ `CommonSubviews.swift`
|
||||
- ❌ `ResidenceSubviews.swift`
|
||||
- ❌ `TaskSubviews.swift`
|
||||
- ❌ `DELETE_THESE_FILES.txt`
|
||||
|
||||
These were temporary files and have been replaced by the individual files in this `Subviews` folder.
|
||||
|
||||
## 📝 Usage
|
||||
|
||||
All main views (LoginView, ResidencesListView, ResidenceDetailView, etc.) have already been updated to use these subviews. The components are automatically available once added to the Xcode project.
|
||||
|
||||
Example:
|
||||
```swift
|
||||
import SwiftUI
|
||||
|
||||
struct MyView: View {
|
||||
var body: some View {
|
||||
VStack {
|
||||
LoginHeader() // Automatically available
|
||||
ErrorMessageView(message: "Error", onDismiss: {})
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
**Total Components**: 17 individual view files
|
||||
**Total Previews**: 17 (one per file)
|
||||
**Organization**: Feature-based folder structure
|
||||
23
iosApp/iosApp/Subviews/Residence/EmptyResidencesView.swift
Normal file
23
iosApp/iosApp/Subviews/Residence/EmptyResidencesView.swift
Normal file
@@ -0,0 +1,23 @@
|
||||
import SwiftUI
|
||||
|
||||
struct EmptyResidencesView: View {
|
||||
var body: some View {
|
||||
VStack(spacing: 16) {
|
||||
Image(systemName: "house")
|
||||
.font(.system(size: 80))
|
||||
.foregroundColor(.blue.opacity(0.6))
|
||||
|
||||
Text("No properties yet")
|
||||
.font(.title2)
|
||||
.fontWeight(.semibold)
|
||||
|
||||
Text("Add your first property to get started!")
|
||||
.font(.body)
|
||||
.foregroundColor(.secondary)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#Preview {
|
||||
EmptyResidencesView()
|
||||
}
|
||||
32
iosApp/iosApp/Subviews/Residence/PropertyDetailItem.swift
Normal file
32
iosApp/iosApp/Subviews/Residence/PropertyDetailItem.swift
Normal file
@@ -0,0 +1,32 @@
|
||||
import SwiftUI
|
||||
|
||||
struct PropertyDetailItem: View {
|
||||
let icon: String
|
||||
let value: String
|
||||
let label: String
|
||||
|
||||
var body: some View {
|
||||
VStack(spacing: 4) {
|
||||
Image(systemName: icon)
|
||||
.font(.caption)
|
||||
.foregroundColor(.blue)
|
||||
|
||||
Text(value)
|
||||
.font(.subheadline)
|
||||
.fontWeight(.semibold)
|
||||
|
||||
Text(label)
|
||||
.font(.caption2)
|
||||
.foregroundColor(.secondary)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#Preview {
|
||||
HStack(spacing: 24) {
|
||||
PropertyDetailItem(icon: "bed.double.fill", value: "3", label: "Beds")
|
||||
PropertyDetailItem(icon: "shower.fill", value: "2.5", label: "Baths")
|
||||
PropertyDetailItem(icon: "square.fill", value: "1800", label: "Sq Ft")
|
||||
}
|
||||
.padding()
|
||||
}
|
||||
90
iosApp/iosApp/Subviews/Residence/PropertyHeaderCard.swift
Normal file
90
iosApp/iosApp/Subviews/Residence/PropertyHeaderCard.swift
Normal file
@@ -0,0 +1,90 @@
|
||||
import SwiftUI
|
||||
import ComposeApp
|
||||
|
||||
struct PropertyHeaderCard: View {
|
||||
let residence: Residence
|
||||
|
||||
var body: some View {
|
||||
VStack(alignment: .leading, spacing: 16) {
|
||||
HStack {
|
||||
Image(systemName: "house.fill")
|
||||
.font(.title2)
|
||||
.foregroundColor(.blue)
|
||||
|
||||
VStack(alignment: .leading, spacing: 4) {
|
||||
Text(residence.name)
|
||||
.font(.title2)
|
||||
.fontWeight(.bold)
|
||||
|
||||
Text(residence.propertyType)
|
||||
.font(.caption)
|
||||
.foregroundColor(.secondary)
|
||||
}
|
||||
|
||||
Spacer()
|
||||
}
|
||||
|
||||
Divider()
|
||||
|
||||
VStack(alignment: .leading, spacing: 4) {
|
||||
Label(residence.streetAddress, systemImage: "mappin.circle.fill")
|
||||
.font(.subheadline)
|
||||
|
||||
Text("\(residence.city), \(residence.stateProvince) \(residence.postalCode)")
|
||||
.font(.subheadline)
|
||||
.foregroundColor(.secondary)
|
||||
|
||||
if !residence.country.isEmpty {
|
||||
Text(residence.country)
|
||||
.font(.caption)
|
||||
.foregroundColor(.secondary)
|
||||
}
|
||||
}
|
||||
|
||||
if let bedrooms = residence.bedrooms,
|
||||
let bathrooms = residence.bathrooms {
|
||||
Divider()
|
||||
|
||||
HStack(spacing: 24) {
|
||||
PropertyDetailItem(icon: "bed.double.fill", value: "\(bedrooms)", label: "Beds")
|
||||
PropertyDetailItem(icon: "shower.fill", value: String(format: "%.1f", bathrooms), label: "Baths")
|
||||
|
||||
if let sqft = residence.squareFootage {
|
||||
PropertyDetailItem(icon: "square.fill", value: "\(sqft)", label: "Sq Ft")
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.padding(20)
|
||||
.background(Color.blue.opacity(0.1))
|
||||
.cornerRadius(16)
|
||||
}
|
||||
}
|
||||
|
||||
//#Preview {
|
||||
// PropertyHeaderCard(residence: Residence(
|
||||
// id: 1,
|
||||
// owner: "My Beautiful Home",
|
||||
// ownerUsername: "House",
|
||||
// name: "123 Main Street",
|
||||
// propertyType: nil,
|
||||
// streetAddress: "San Francisco",
|
||||
// apartmentUnit: "CA",
|
||||
// city: "94102",
|
||||
// stateProvince: "USA",
|
||||
// postalCode: 3,
|
||||
// country: 2.5,
|
||||
// bedrooms: 1800,
|
||||
// bathrooms: 0.25,
|
||||
// squareFootage: 2010,
|
||||
// lotSize: nil,
|
||||
// yearBuilt: nil,
|
||||
// description: nil,
|
||||
// purchaseDate: true,
|
||||
// purchasePrice: "testuser",
|
||||
// isPrimary: 1,
|
||||
// createdAt: "2024-01-01T00:00:00Z",
|
||||
// updatedAt: "2024-01-01T00:00:00Z"
|
||||
// ))
|
||||
// .padding()
|
||||
//}
|
||||
90
iosApp/iosApp/Subviews/Residence/ResidenceCard.swift
Normal file
90
iosApp/iosApp/Subviews/Residence/ResidenceCard.swift
Normal file
@@ -0,0 +1,90 @@
|
||||
import SwiftUI
|
||||
import ComposeApp
|
||||
|
||||
struct ResidenceCard: View {
|
||||
let residence: ResidenceWithTasks
|
||||
|
||||
var body: some View {
|
||||
VStack(alignment: .leading, spacing: 12) {
|
||||
VStack(alignment: .leading, spacing: 4) {
|
||||
Text(residence.name)
|
||||
.font(.title3)
|
||||
.fontWeight(.bold)
|
||||
.foregroundColor(.primary)
|
||||
|
||||
Text(residence.streetAddress)
|
||||
.font(.subheadline)
|
||||
.foregroundColor(.secondary)
|
||||
|
||||
Text("\(residence.city), \(residence.stateProvince)")
|
||||
.font(.subheadline)
|
||||
.foregroundColor(.secondary)
|
||||
}
|
||||
|
||||
Divider()
|
||||
|
||||
HStack(spacing: 24) {
|
||||
TaskStatChip(
|
||||
icon: "list.bullet",
|
||||
value: "\(residence.taskSummary.total)",
|
||||
label: "Tasks",
|
||||
color: .blue
|
||||
)
|
||||
|
||||
TaskStatChip(
|
||||
icon: "checkmark.circle.fill",
|
||||
value: "\(residence.taskSummary.completed)",
|
||||
label: "Done",
|
||||
color: .green
|
||||
)
|
||||
|
||||
TaskStatChip(
|
||||
icon: "clock.fill",
|
||||
value: "\(residence.taskSummary.pending)",
|
||||
label: "Pending",
|
||||
color: .orange
|
||||
)
|
||||
}
|
||||
}
|
||||
.padding(20)
|
||||
.background(Color(.systemBackground))
|
||||
.cornerRadius(12)
|
||||
.shadow(color: Color.black.opacity(0.05), radius: 5, x: 0, y: 2)
|
||||
}
|
||||
}
|
||||
|
||||
#Preview {
|
||||
ResidenceCard(residence: ResidenceWithTasks(
|
||||
id: 1,
|
||||
owner: 1,
|
||||
ownerUsername: "testuser",
|
||||
name: "My Home",
|
||||
propertyType: "House",
|
||||
streetAddress: "123 Main St",
|
||||
apartmentUnit: nil,
|
||||
city: "San Francisco",
|
||||
stateProvince: "CA",
|
||||
postalCode: "94102",
|
||||
country: "USA",
|
||||
bedrooms: 3,
|
||||
bathrooms: 2.5,
|
||||
squareFootage: 1800,
|
||||
lotSize: 0.25,
|
||||
yearBuilt: 2010,
|
||||
description: nil,
|
||||
purchaseDate: nil,
|
||||
purchasePrice: nil,
|
||||
isPrimary: true,
|
||||
taskSummary: TaskSummary(
|
||||
total: 10,
|
||||
completed: 3,
|
||||
pending: 5,
|
||||
inProgress: 2,
|
||||
overdue: 0
|
||||
),
|
||||
tasks: [],
|
||||
createdAt: "2024-01-01T00:00:00Z",
|
||||
updatedAt: "2024-01-01T00:00:00Z"
|
||||
))
|
||||
.padding()
|
||||
}
|
||||
62
iosApp/iosApp/Subviews/Residence/SummaryCard.swift
Normal file
62
iosApp/iosApp/Subviews/Residence/SummaryCard.swift
Normal file
@@ -0,0 +1,62 @@
|
||||
import SwiftUI
|
||||
import ComposeApp
|
||||
|
||||
struct SummaryCard: View {
|
||||
let summary: MyResidencesSummary
|
||||
|
||||
var body: some View {
|
||||
VStack(spacing: 16) {
|
||||
HStack {
|
||||
Image(systemName: "chart.bar.doc.horizontal")
|
||||
.font(.title3)
|
||||
Text("Overview")
|
||||
.font(.title3)
|
||||
.fontWeight(.bold)
|
||||
Spacer()
|
||||
}
|
||||
|
||||
HStack(spacing: 20) {
|
||||
SummaryStatView(
|
||||
icon: "house.fill",
|
||||
value: "\(summary.totalResidences)",
|
||||
label: "Properties"
|
||||
)
|
||||
|
||||
SummaryStatView(
|
||||
icon: "list.bullet",
|
||||
value: "\(summary.totalTasks)",
|
||||
label: "Total Tasks"
|
||||
)
|
||||
}
|
||||
|
||||
Divider()
|
||||
|
||||
HStack(spacing: 20) {
|
||||
SummaryStatView(
|
||||
icon: "calendar",
|
||||
value: "\(summary.tasksDueNextWeek)",
|
||||
label: "Due This Week"
|
||||
)
|
||||
|
||||
SummaryStatView(
|
||||
icon: "calendar.badge.clock",
|
||||
value: "\(summary.tasksDueNextMonth)",
|
||||
label: "Due This Month"
|
||||
)
|
||||
}
|
||||
}
|
||||
.padding(20)
|
||||
.background(Color.blue.opacity(0.1))
|
||||
.cornerRadius(16)
|
||||
}
|
||||
}
|
||||
|
||||
#Preview {
|
||||
SummaryCard(summary: MyResidencesSummary(
|
||||
totalResidences: 3,
|
||||
totalTasks: 12,
|
||||
tasksDueNextWeek: 4,
|
||||
tasksDueNextMonth: 8
|
||||
))
|
||||
.padding()
|
||||
}
|
||||
42
iosApp/iosApp/Subviews/Residence/SummaryStatView.swift
Normal file
42
iosApp/iosApp/Subviews/Residence/SummaryStatView.swift
Normal file
@@ -0,0 +1,42 @@
|
||||
import SwiftUI
|
||||
|
||||
struct SummaryStatView: View {
|
||||
let icon: String
|
||||
let value: String
|
||||
let label: String
|
||||
|
||||
var body: some View {
|
||||
VStack(spacing: 8) {
|
||||
Image(systemName: icon)
|
||||
.font(.title3)
|
||||
.foregroundColor(.blue)
|
||||
|
||||
Text(value)
|
||||
.font(.title2)
|
||||
.fontWeight(.bold)
|
||||
|
||||
Text(label)
|
||||
.font(.caption)
|
||||
.foregroundColor(.secondary)
|
||||
.multilineTextAlignment(.center)
|
||||
}
|
||||
.frame(maxWidth: .infinity)
|
||||
}
|
||||
}
|
||||
|
||||
#Preview {
|
||||
HStack(spacing: 20) {
|
||||
SummaryStatView(
|
||||
icon: "house.fill",
|
||||
value: "3",
|
||||
label: "Properties"
|
||||
)
|
||||
|
||||
SummaryStatView(
|
||||
icon: "list.bullet",
|
||||
value: "12",
|
||||
label: "Total Tasks"
|
||||
)
|
||||
}
|
||||
.padding()
|
||||
}
|
||||
51
iosApp/iosApp/Subviews/Residence/TaskStatChip.swift
Normal file
51
iosApp/iosApp/Subviews/Residence/TaskStatChip.swift
Normal file
@@ -0,0 +1,51 @@
|
||||
import SwiftUI
|
||||
|
||||
struct TaskStatChip: View {
|
||||
let icon: String
|
||||
let value: String
|
||||
let label: String
|
||||
let color: Color
|
||||
|
||||
var body: some View {
|
||||
HStack(spacing: 4) {
|
||||
Image(systemName: icon)
|
||||
.font(.caption)
|
||||
.foregroundColor(color)
|
||||
|
||||
Text(value)
|
||||
.font(.subheadline)
|
||||
.fontWeight(.bold)
|
||||
.foregroundColor(color)
|
||||
|
||||
Text(label)
|
||||
.font(.caption)
|
||||
.foregroundColor(.secondary)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#Preview {
|
||||
VStack(spacing: 16) {
|
||||
TaskStatChip(
|
||||
icon: "list.bullet",
|
||||
value: "10",
|
||||
label: "Tasks",
|
||||
color: .blue
|
||||
)
|
||||
|
||||
TaskStatChip(
|
||||
icon: "checkmark.circle.fill",
|
||||
value: "3",
|
||||
label: "Done",
|
||||
color: .green
|
||||
)
|
||||
|
||||
TaskStatChip(
|
||||
icon: "clock.fill",
|
||||
value: "5",
|
||||
label: "Pending",
|
||||
color: .orange
|
||||
)
|
||||
}
|
||||
.padding()
|
||||
}
|
||||
24
iosApp/iosApp/Subviews/Task/EmptyTasksView.swift
Normal file
24
iosApp/iosApp/Subviews/Task/EmptyTasksView.swift
Normal file
@@ -0,0 +1,24 @@
|
||||
import SwiftUI
|
||||
|
||||
struct EmptyTasksView: View {
|
||||
var body: some View {
|
||||
VStack(spacing: 12) {
|
||||
Image(systemName: "checkmark.circle")
|
||||
.font(.system(size: 48))
|
||||
.foregroundColor(.gray.opacity(0.5))
|
||||
|
||||
Text("No tasks yet")
|
||||
.font(.subheadline)
|
||||
.foregroundColor(.secondary)
|
||||
}
|
||||
.frame(maxWidth: .infinity)
|
||||
.padding(32)
|
||||
.background(Color(.systemBackground))
|
||||
.cornerRadius(12)
|
||||
}
|
||||
}
|
||||
|
||||
#Preview {
|
||||
EmptyTasksView()
|
||||
.padding()
|
||||
}
|
||||
39
iosApp/iosApp/Subviews/Task/PriorityBadge.swift
Normal file
39
iosApp/iosApp/Subviews/Task/PriorityBadge.swift
Normal file
@@ -0,0 +1,39 @@
|
||||
import SwiftUI
|
||||
|
||||
struct PriorityBadge: View {
|
||||
let priority: String
|
||||
|
||||
var body: some View {
|
||||
HStack(spacing: 4) {
|
||||
Image(systemName: "exclamationmark.circle.fill")
|
||||
.font(.caption2)
|
||||
|
||||
Text(priority.capitalized)
|
||||
.font(.caption)
|
||||
.fontWeight(.medium)
|
||||
}
|
||||
.padding(.horizontal, 8)
|
||||
.padding(.vertical, 4)
|
||||
.background(priorityColor.opacity(0.2))
|
||||
.foregroundColor(priorityColor)
|
||||
.cornerRadius(6)
|
||||
}
|
||||
|
||||
private var priorityColor: Color {
|
||||
switch priority.lowercased() {
|
||||
case "high": return .red
|
||||
case "medium": return .orange
|
||||
case "low": return .green
|
||||
default: return .gray
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#Preview {
|
||||
VStack(spacing: 12) {
|
||||
PriorityBadge(priority: "high")
|
||||
PriorityBadge(priority: "medium")
|
||||
PriorityBadge(priority: "low")
|
||||
}
|
||||
.padding()
|
||||
}
|
||||
42
iosApp/iosApp/Subviews/Task/StatusBadge.swift
Normal file
42
iosApp/iosApp/Subviews/Task/StatusBadge.swift
Normal file
@@ -0,0 +1,42 @@
|
||||
import SwiftUI
|
||||
|
||||
struct StatusBadge: View {
|
||||
let status: String
|
||||
|
||||
var body: some View {
|
||||
Text(formatStatus(status))
|
||||
.font(.caption)
|
||||
.padding(.horizontal, 8)
|
||||
.padding(.vertical, 4)
|
||||
.background(statusColor.opacity(0.2))
|
||||
.foregroundColor(statusColor)
|
||||
.cornerRadius(6)
|
||||
}
|
||||
|
||||
private func formatStatus(_ status: String) -> String {
|
||||
switch status {
|
||||
case "in_progress": return "In Progress"
|
||||
default: return status.capitalized
|
||||
}
|
||||
}
|
||||
|
||||
private var statusColor: Color {
|
||||
switch status {
|
||||
case "completed": return .green
|
||||
case "in_progress": return .blue
|
||||
case "pending": return .orange
|
||||
case "cancelled": return .red
|
||||
default: return .gray
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#Preview {
|
||||
VStack(spacing: 12) {
|
||||
StatusBadge(status: "pending")
|
||||
StatusBadge(status: "in_progress")
|
||||
StatusBadge(status: "completed")
|
||||
StatusBadge(status: "cancelled")
|
||||
}
|
||||
.padding()
|
||||
}
|
||||
147
iosApp/iosApp/Subviews/Task/TaskCard.swift
Normal file
147
iosApp/iosApp/Subviews/Task/TaskCard.swift
Normal file
@@ -0,0 +1,147 @@
|
||||
import SwiftUI
|
||||
import ComposeApp
|
||||
|
||||
struct TaskCard: View {
|
||||
let task: TaskDetail
|
||||
let onEdit: () -> Void
|
||||
let onCancel: (() -> Void)?
|
||||
let onUncancel: (() -> Void)?
|
||||
|
||||
var body: some View {
|
||||
VStack(alignment: .leading, spacing: 12) {
|
||||
HStack {
|
||||
VStack(alignment: .leading, spacing: 4) {
|
||||
Text(task.title)
|
||||
.font(.headline)
|
||||
.foregroundColor(.primary)
|
||||
|
||||
if let status = task.status {
|
||||
StatusBadge(status: status.name)
|
||||
}
|
||||
}
|
||||
|
||||
Spacer()
|
||||
|
||||
PriorityBadge(priority: task.priority.name)
|
||||
}
|
||||
|
||||
if let description = task.description_, !description.isEmpty {
|
||||
Text(description)
|
||||
.font(.subheadline)
|
||||
.foregroundColor(.secondary)
|
||||
.lineLimit(2)
|
||||
}
|
||||
|
||||
HStack {
|
||||
Label(task.frequency.displayName, systemImage: "repeat")
|
||||
.font(.caption)
|
||||
.foregroundColor(.secondary)
|
||||
|
||||
Spacer()
|
||||
|
||||
Label(formatDate(task.dueDate), systemImage: "calendar")
|
||||
.font(.caption)
|
||||
.foregroundColor(.secondary)
|
||||
}
|
||||
|
||||
if task.completions.count > 0 {
|
||||
Divider()
|
||||
|
||||
HStack {
|
||||
Image(systemName: "checkmark.circle")
|
||||
.foregroundColor(.green)
|
||||
Text("Completed \(task.completions.count) time\(task.completions.count == 1 ? "" : "s")")
|
||||
.font(.caption)
|
||||
.foregroundColor(.secondary)
|
||||
}
|
||||
}
|
||||
|
||||
if task.showCompletedButton {
|
||||
Button(action: {}) {
|
||||
HStack {
|
||||
Image(systemName: "checkmark.circle.fill")
|
||||
.resizable()
|
||||
.frame(width: 20, height: 20)
|
||||
Text("Complete Task")
|
||||
.font(.title3.weight(.semibold))
|
||||
}
|
||||
.frame(maxWidth: .infinity)
|
||||
}
|
||||
.buttonStyle(.borderedProminent)
|
||||
.cornerRadius(12)
|
||||
}
|
||||
|
||||
HStack(spacing: 8) {
|
||||
Button(action: onEdit) {
|
||||
Label("Edit", systemImage: "pencil")
|
||||
.font(.subheadline)
|
||||
.frame(maxWidth: .infinity)
|
||||
}
|
||||
.buttonStyle(.bordered)
|
||||
|
||||
if let onCancel = onCancel {
|
||||
Button(action: onCancel) {
|
||||
Label("Cancel", systemImage: "xmark.circle")
|
||||
.font(.subheadline)
|
||||
.frame(maxWidth: .infinity)
|
||||
}
|
||||
.buttonStyle(.bordered)
|
||||
.tint(.red)
|
||||
} else if let onUncancel = onUncancel {
|
||||
Button(action: onUncancel) {
|
||||
Label("Restore", systemImage: "arrow.uturn.backward")
|
||||
.font(.subheadline)
|
||||
.frame(maxWidth: .infinity)
|
||||
}
|
||||
.buttonStyle(.borderedProminent)
|
||||
.tint(.blue)
|
||||
}
|
||||
}
|
||||
}
|
||||
.padding(16)
|
||||
.background(Color(.systemBackground))
|
||||
.cornerRadius(12)
|
||||
.shadow(color: Color.black.opacity(0.05), radius: 3, x: 0, y: 2)
|
||||
}
|
||||
|
||||
private func formatDate(_ dateString: String) -> String {
|
||||
let formatter = DateFormatter()
|
||||
formatter.dateFormat = "yyyy-MM-dd"
|
||||
if let date = formatter.date(from: dateString) {
|
||||
formatter.dateStyle = .medium
|
||||
return formatter.string(from: date)
|
||||
}
|
||||
return dateString
|
||||
}
|
||||
}
|
||||
|
||||
#Preview {
|
||||
VStack(spacing: 16) {
|
||||
TaskCard(
|
||||
task: TaskDetail(
|
||||
id: 1,
|
||||
residence: 1,
|
||||
title: "Clean Gutters",
|
||||
description: "Remove all debris from gutters",
|
||||
category: TaskCategory(id: 1, name: "maintenance", description: ""),
|
||||
priority: TaskPriority(id: 2, name: "medium", displayName: "", description: ""),
|
||||
frequency: TaskFrequency(id: 1, name: "monthly", displayName: "30"),
|
||||
status: TaskStatus(id: 1, name: "pending", displayName: "", description: ""),
|
||||
dueDate: "2024-12-15",
|
||||
estimatedCost: "150.00",
|
||||
actualCost: nil,
|
||||
notes: nil,
|
||||
createdAt: "2024-01-01T00:00:00Z",
|
||||
updatedAt: "2024-01-01T00:00:00Z",
|
||||
nextScheduledDate: nil,
|
||||
showCompletedButton: true,
|
||||
completions: []
|
||||
),
|
||||
onEdit: {},
|
||||
onCancel: {},
|
||||
onUncancel: nil
|
||||
)
|
||||
}
|
||||
.padding()
|
||||
.background(Color(.systemGroupedBackground))
|
||||
}
|
||||
32
iosApp/iosApp/Subviews/Task/TaskPill.swift
Normal file
32
iosApp/iosApp/Subviews/Task/TaskPill.swift
Normal file
@@ -0,0 +1,32 @@
|
||||
import SwiftUI
|
||||
|
||||
struct TaskPill: View {
|
||||
let count: Int32
|
||||
let label: String
|
||||
let color: Color
|
||||
|
||||
var body: some View {
|
||||
HStack(spacing: 4) {
|
||||
Text("\(count)")
|
||||
.font(.caption)
|
||||
.fontWeight(.bold)
|
||||
|
||||
Text(label)
|
||||
.font(.caption2)
|
||||
}
|
||||
.padding(.horizontal, 8)
|
||||
.padding(.vertical, 4)
|
||||
.background(color.opacity(0.2))
|
||||
.foregroundColor(color)
|
||||
.cornerRadius(8)
|
||||
}
|
||||
}
|
||||
|
||||
#Preview {
|
||||
HStack(spacing: 8) {
|
||||
TaskPill(count: 12, label: "Total", color: .blue)
|
||||
TaskPill(count: 5, label: "Pending", color: .orange)
|
||||
TaskPill(count: 3, label: "Done", color: .green)
|
||||
}
|
||||
.padding()
|
||||
}
|
||||
113
iosApp/iosApp/Subviews/Task/TasksSection.swift
Normal file
113
iosApp/iosApp/Subviews/Task/TasksSection.swift
Normal file
@@ -0,0 +1,113 @@
|
||||
import SwiftUI
|
||||
import ComposeApp
|
||||
|
||||
struct TasksSection: View {
|
||||
let tasksResponse: TasksByResidenceResponse
|
||||
@Binding var showCancelledTasks: Bool
|
||||
let onEditTask: (TaskDetail) -> Void
|
||||
let onCancelTask: (TaskDetail) -> Void
|
||||
let onUncancelTask: (TaskDetail) -> Void
|
||||
|
||||
var body: some View {
|
||||
VStack(alignment: .leading, spacing: 12) {
|
||||
HStack {
|
||||
Text("Tasks")
|
||||
.font(.title2)
|
||||
.fontWeight(.bold)
|
||||
|
||||
Spacer()
|
||||
|
||||
HStack(spacing: 8) {
|
||||
TaskPill(count: tasksResponse.summary.total, label: "Total", color: .blue)
|
||||
TaskPill(count: tasksResponse.summary.pending, label: "Pending", color: .orange)
|
||||
TaskPill(count: tasksResponse.summary.completed, label: "Done", color: .green)
|
||||
}
|
||||
}
|
||||
|
||||
if tasksResponse.tasks.isEmpty && tasksResponse.cancelledTasks.isEmpty {
|
||||
EmptyTasksView()
|
||||
} else {
|
||||
ForEach(tasksResponse.tasks, id: \.id) { task in
|
||||
TaskCard(
|
||||
task: task,
|
||||
onEdit: { onEditTask(task) },
|
||||
onCancel: { onCancelTask(task) },
|
||||
onUncancel: nil
|
||||
)
|
||||
}
|
||||
|
||||
if !tasksResponse.cancelledTasks.isEmpty {
|
||||
VStack(alignment: .leading, spacing: 12) {
|
||||
HStack {
|
||||
Label("Cancelled Tasks (\(tasksResponse.cancelledTasks.count))", systemImage: "xmark.circle")
|
||||
.font(.headline)
|
||||
.foregroundColor(.red)
|
||||
|
||||
Spacer()
|
||||
|
||||
Button(showCancelledTasks ? "Hide" : "Show") {
|
||||
showCancelledTasks.toggle()
|
||||
}
|
||||
.font(.subheadline)
|
||||
}
|
||||
.padding(.top, 8)
|
||||
|
||||
if showCancelledTasks {
|
||||
ForEach(tasksResponse.cancelledTasks, id: \.id) { task in
|
||||
TaskCard(
|
||||
task: task,
|
||||
onEdit: { onEditTask(task) },
|
||||
onCancel: nil,
|
||||
onUncancel: { onUncancelTask(task) }
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#Preview {
|
||||
TasksSection(
|
||||
tasksResponse: TasksByResidenceResponse(
|
||||
residenceId: "1",
|
||||
summary: TaskSummary(
|
||||
total: 3,
|
||||
completed: 1,
|
||||
pending: 2,
|
||||
inProgress: 0,
|
||||
overdue: 1
|
||||
),
|
||||
tasks: [
|
||||
TaskDetail(
|
||||
id: 1,
|
||||
residence: 1,
|
||||
title: "Clean Gutters",
|
||||
description: "Remove all debris",
|
||||
category: TaskCategory(id: 1, name: "maintenance", description: "General upkeep tasks"),
|
||||
priority: TaskPriority(id: 2, name: "medium", displayName: "Medium", description: "Standard priority"),
|
||||
frequency: TaskFrequency(id: 1, name: "monthly", displayName: "Monthly"),
|
||||
status: TaskStatus(id: 1, name: "pending", displayName: "Pending", description: "Awaiting completion"),
|
||||
dueDate: "2024-12-15",
|
||||
estimatedCost: "150.00",
|
||||
actualCost: nil,
|
||||
notes: nil,
|
||||
createdAt: "2024-01-01T00:00:00Z",
|
||||
updatedAt: "2024-01-01T00:00:00Z",
|
||||
nextScheduledDate: nil,
|
||||
showCompletedButton: true,
|
||||
completions: []
|
||||
)
|
||||
],
|
||||
cancelledTasks: []
|
||||
),
|
||||
showCancelledTasks: .constant(true),
|
||||
onEditTask: { _ in },
|
||||
onCancelTask: { _ in },
|
||||
onUncancelTask: { _ in }
|
||||
)
|
||||
.padding()
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user